kenwheeler
Syncing more than one slider with asNavFor for multiple sliders on the same page with each function
short description of the bug / issue, provide more detail below. I'm trying to sync multiple sliders with asNavFor to multiple sliders on the same page, therefore i run an each function that sets the same settings for every slider. The issue is that I can not specify the navigation sliders using variables. ====================================================================
https://codepen.io/n-bagge/pen/Exebyaw
Test commented asNavFor settings in the codepen.
use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.
====================================================================
Steps to reproduce the problem
- asNavFor does not accept the format asNavFor: variable_1, variable_2
- asNavFor does not accept the format asNavFor: [variable_1, variable_2]
- asNavFor does accept the format asNavFor: '#navigation_1, #navigation_2' but it is not scalable unless every slider is specified as a separate slick function, far from ideal.
====================================================================
What is the expected behaviour?
I need to specify the location of the navigation sliders in the each function for it to scale with multiple sliders on the same page.
====================================================================
What is observed behaviour?
No option to specify multiple navigation sliders using variables.
====================================================================
More Details
- Which browsers/versions does it happen on? Firefox 110.0.1
- Which jQuery/Slick version are you using? Jquery 3.6.0 / Slick 1.8.1
- Did this work before? No
This is because internally this library uses jquery to select the asNavFor item(s).
- The comma-separated version isnt a valid object value since the comma would mean variable_2 is another property.
- The array doesn't work because (AFAIK) the jquery selector doesnt accept arrays,
- Comma-separated string works because the jquery selector does accept this format.
It looks like a fix would be fairly easy.
Relevant code form Slick.js
Slick.prototype.getNavTarget = function() {
var _ = this,
asNavFor = _.options.asNavFor;
if ( asNavFor && asNavFor !== null ) {
asNavFor = $(asNavFor).not(_.$slider);
}
return asNavFor;
};
Ok, so how would one go about to fix this? rewrite the asNavFor defined in slick? I'm not sure what that would look like.
Yes, if you really want to pass an array of DOM elements or jQuery objects, it would require altering the getNavTarget() function.
Specifically
if ( asNavFor && asNavFor !== null ) {
asNavFor = $(asNavFor).not(_.$slider);
}
Alternatively, you could use a css class name to identify the other carousel(s).
asNavFor: '.dependent-navigations'
and just add the css class to the other navigations so you can target them. Honestly, this is probably the easiest way to accomplish what you want.
Hello, I resolved this a while ago, so I thought I'd share what worked.
To summarise, the issue I was experiencing previously was linking three (3) carousels with each other. Essentially, what I have is
- 1:1 image slider
- Slider title with index sync
- Slider text description
The trick that did it for me was to specify asNavFor using ".add". See the code below.
$('.carousel-square').each(function() { // Initialize slick carousel for all square carousels
const $this = $(this);
const carousel_title = $this.parent().next('.carousel-info').find('.carousel_index_title .figure-title');
const carousel_para = $this.parent().next('.carousel-info').find('.figure-paragraph');
const carousel_prev = $this.nextAll('.slick-arrow-container').find('.slick-prev');
const carousel_next = $this.nextAll('.slick-arrow-container').find('.slick-next');
// Initialize the image carousel
$this.slick({
draggable: false,
speed: 750,
cssEase: 'var(--easeinoutQuart)',
asNavFor: carousel_title.add(carousel_para), // Sync with title and paragraph carousels
prevArrow: carousel_prev,
nextArrow: carousel_next
});
// Initialize the title carousel
carousel_title.slick({
draggable: false,
speed: 750,
cssEase: 'var(--easeinoutQuart)',
asNavFor: $this.add(carousel_para), // Sync with image and paragraph carousels
vertical: true,
arrows: false // No arrows for the title carousel
});
// Initialize the paragraph carousel
carousel_para.slick({
draggable: false,
speed: 750,
cssEase: 'var(--easeinoutQuart)',
asNavFor: $this.add(carousel_title), // Sync with image and title carousels
arrows: false // No arrows for the paragraph carousel
});
// Update the total index count
const imgcount = $this.find('.slick-slide:not(.slick-cloned)').length;
const total_index = $this.parent().next('.carousel-info').find('.carousel_index_title .carousel_index sup:last-child');
total_index.text((imgcount < 10 ? '0' : '') + imgcount);
// Update the current slide index on change
$this.on('init reInit afterChange', function(event, slick, currentSlide) {
const current_index = $this.parent().next('.carousel-info').find('.carousel_index_title .carousel_index h1');
const i = (currentSlide || 0) + 1;
current_index.text(i < 10 ? '0' + i : i);
});
});
The live working website can be found at https://www.crispycustoms.cc/build-logs/project-02 (don't know if links like these are allowed here)
/ Niklas
https://github.com/user-attachments/assets/34954c8e-b9a6-4018-bf31-5abf9f850bf1
@crispy-customs thanks for sharing, you just saved my day!
Any idea why this is working? Is it nesting the asNavFor option two levels deep, a bit like inception?
@crispy-customs thanks for sharing, you just saved my day!
Any idea why this is working? Is it nesting the asNavFor option two levels deep, a bit like inception?
Glad to hear this fix could help! I'm not very experienced in JS/Jquery, I was able to reach this solution using chatGPT which gives a brief (although partly unclear explanation) why it works. ChatGPT went through 5-6 other versions that didn't work before suggesting this method. This is what I got.