asNavFor with more than 2 sliders

[wgstjf]

Hi,

Struggling here so I hope you can help.

I have a situation where I need 3 sliders linked to each other, in effect a drag or nav click affects each of the 3 sliders. As far as I am aware the 'asNavFor' option can only be passed a single element. I thought about some form of daisy chaining, ie.

1) Init slider 1 - not using asNavFor as no other sliders initialised yet 2) Init slider 2 - set asNavFor to Slider 1 3) Init slider 3 - set asNavFor to Slider 2

However this does not seem to be working reliably. Any thoughts on how best to proceed on this would be greatly appreciated. I suppose an alternative could be to detect slide changes on one of the sliders manually...

Cheers,

Will

[desandro]

Thanks for submitting this issue. I feel the best way to do this would be to add an event on select that handles the behavior, rather than trying to use asNavFor option.

See jQuery demo https://codepen.io/desandro/pen/QgedpQ

var $carousels = $('.carousel');
$carousels.flickity();

// sync Flickity instances
// select index on any Flickity select
$carousels.on( 'select.flickity', function( event ) {
  var $target = $( event.currentTarget );
  var flkty = $target.data('flickity');
  var selectedIndex = flkty.selectedIndex;
  $carousels.each( function( i, carousel ) {
    var $carousel = $( carousel );
    flkty = $carousel.data('flickity');
    if ( flkty.selectedIndex != selectedIndex ) {
      $carousel.flickity( 'select', selectedIndex );
    }
  });
});

See vanilla JS demo https://codepen.io/desandro/pen/PjMWEj

var flickities = [];
var carousels = document.querySelectorAll('.carousel');

for ( var i=0; i < carousels.length; i++ ) {
  var carousel = carousels[i];
  var flkty = new Flickity( carousel );
  flkty.on( 'select', onSelect );
  flickities.push( flkty );
}

function onSelect() {
  var index = this.selectedIndex;
  flickities.forEach( function( flkty ) {
    if ( flkty.selectedIndex != index ) {
      flkty.select( index );
    }
  });
}

[wgstjf]

@desandro that's amazing thanks. I really appreciate it and it works perfectly!

Will send over a link to the site when the client gives the ok for it to go live. The homepage alone features 5 instances of flickity :-)

Cheers,

Will

[wgstjf]

@desandro

Sorry a quick followup question on this if I may. Does your function above impact on the pauseOnHover capability?

If one slider is being hovered over it would be great if it paused all the sliders - is this possible?

Cheers in advance.

Will

[desandro]

Sorry, no. To enable pausing on hover, you'll have to add your own code for the non-auto-play carousels.

[richardwiggins]

@desandro @wgstjf Don't suppose you got the pauseOnHover working and have an example? I need to get this working with asNavFor for 2 sliders.

[wgstjf]

@richardwiggins sorry no. In the end we disabled autoplay which turned out to be a better option for what we were building.

[richardwiggins]

@wgstjf Ah okay. Thanks anyway.