search

metafizzy / flickity-sync

Sync up two Flickity carousels
29 stars 6 forks source link

Sync on nav slide click #8

Open htmagedev opened 7 years ago

htmagedev commented 7 years ago

Hello,

Flickity sync is the perfect solution for showing synchronized sliders. In our case it's used as a product image gallery: 1 big image in top slider and thumbnails in navigation slider beneath.

However, there is one thing missing: screen recordings of real user visits shows us that users frequently click on the navigation slides to get a bigger image in the top slider. But that does not work with flickity sync. We also tried as-nav-for which can do that but then sliders are not fully synced. Is it possible to get best of both worlds?

desandro commented 7 years ago

Thanks for reporting this issue. You should be able to add some JS to resolve this

// jQuery
$navCarousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
  if ( cellElement ) {
    $mainCarousel.flickity( 'select', cellIndex );
  }
});
// vanilla JS
navFlkty.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  mainFlkty.select( cellIndex );
});
htmagedev commented 7 years ago

Yes! perfect, that's working great. Thanks.

The next ideas I have to make it a perfect product images gallery is:

  1. To always fit both sliders into the viewport of the browser. That would make a good UX on all devices, especially mobile devices.
  2. To have a "full-screen" button on the main carousel to get the main carousel full screen, images centered and with caption (that would replace lightbox functionality).

For 1. I've tried various options (always setGallerySize: false) but somehow can't get it right with this setup of nav and main slider. I guess for 2. some CSS scripting has to be done. Any ideas?

Thanks!