Multiple Carousels + asNavFor + Modal

[ghost]

I want to use flickity in fancybox modal. Each link will display a different flickity carousel.

Test case: https://jsfiddle.net/2zb5qesa/

I'm working with a "multiple carousels" example I found here (vanilla JS). flickity carousels work outside fancybox but not inside. Can someone please help me figure this out?

[desandro]

Thanks for reporting this issue.

You had the right idea! To trigger resize on the correct Flickity instances, you can use the slide.$slide property with in fancybox's afterShow event callback.

Here's my solution. See demo https://jsfiddle.net/2zb5qesa/13/

$(document).ready(function() {
  $('.carousel-container').each( function( i, container ) {
    var $container = $( container );
    // main Flickity
    var $carouselMain = $container.find('.carousel-main').flickity({
      imagesLoaded: true,
      percentPosition: false,
      pageDots: false,
      adaptiveHeight: true
    });
    // nav Flickity
    $container.find('.carousel-nav').flickity({
      asNavFor: $carouselMain[0],
      contain: true,
      pageDots: false,
      groupCells: true,
      adaptiveHeight: true,
      prevNextButtons: false
    });
  });

  $("[data-fancybox]").fancybox({
    idleTime : false,
    smallBtn: false, 
    buttons : [
      'close'
    ],
    touch : {
       vertical : false,
       momentum : false
    },
    wheel : false,
    afterShow: function( instance, slide ){
      slide.$slide.find('.carousel-main').flickity('resize');
      slide.$slide.find('.carousel-nav').flickity('resize');
    }
  });
});

[ghost]

Perfect. Thank you!

[desandro]

You may be interested in taking a look at Fizzy School: lessons in JavaScript for anyone learning jQuery 🎃

[ghost]

I noticed a problem with the demo: https://jsfiddle.net/2zb5qesa/13/embedded/result/ On iPad when the orientation changes, flickity no longer works properly.

[ghost]

Solution: onUpdate : function( instance, slide ) { slide.$slide.find('.carousel-main').flickity('resize'); slide.$slide.find('.carousel-nav').flickity('resize'); }