Multiple Flickity Carousels with custom navigations, page dots & progress bar

Question

I have a carousel that when I first built it only need one per page. However I now need multiple carousels on one page. I've been updating the code to allow multiple carousels, including updating the custom navigation's & dots.

However I've run into a bit of an issue, when you have multiple carousels the first carousel no longer auto plays or shows the progress bar. The second carousel (below it in example) does auto play and show the progress bar.

Here is a jsFiddle.

Here is my code:

$(document).ready(function(){
  var options = {
    cellSelector: '.gallery__slide',
    cellAlign : 'center',
    pageDots : false,
    prevNextButtons : false,
    accessibility : false,
    wrapAround : true,
    imagesLoaded : true,
    pauseAutoPlayOnHover: true,
    fullscreen: true,
    lazyLoad: 1
  };
  var time = 2;
  var $bar,
      $slider,
      isPause,
      tick,
      percentTime;

  $('.gallery__slides').flickity(options);
  $('.gallery-container').each(function(i, container) {
    var $container = $(container);
    var $slider = $container.find('.gallery__slides');
    var flkty = $slider.data('flickity');
    var selectedIndex = flkty.selectedIndex;

    var slideCount = flkty.slides.length;
    var $pagers = $container.find('.gallery__page-dots');

    for (i = 0; i < slideCount; i++) {
      $pagers.append('');
    }

    var $pager = $pagers.find('li');

    var $caption = $container.find('.gallery__caption .image-caption');

    $slider.on( 'select.flickity', function() {
      // set image caption using img's alt
      $caption.text( flkty.selectedElement.children[0].alt );
      $pager.filter('.is-selected').removeClass('is-selected');
      $pager.eq(flkty.selectedIndex).addClass('is-selected');
    });

    $pagers.on( 'click', 'li', function() {
      var index = $(this).index();
      resetProgressbar();
      $slider.flickity( 'select', index );
      startProgressbar();
    });

    // previous
    var $prev = $container.find('.prev');
    $prev.on( 'click', function() {
      resetProgressbar();
      $slider.flickity('previous');
      startProgressbar();
    });
    // next
    var $next = $container.find('.next');
    $next.on( 'click', function() {
      resetProgressbar();
      $slider.flickity('next');
      startProgressbar();
    });
    
    $bar = $container.find('.gallery__progress .progress');
    
    $slider.on({
      mouseenter: function() {
        isPause = true;
      },
      mouseleave: function() {
        isPause = false;
      }
    })
    
    function startProgressbar() {
      resetProgressbar();
      percentTime = 0;
      isPause = false;
      tick = setInterval(interval, 12);
    }
    
    function interval() {
      if(isPause === false) {
        percentTime += 1 / (time+0.1);
        $bar.css({
          width: percentTime+"%"
        });
        if(percentTime >= 100)
          {
            $slider.flickity('next', true);
            startProgressbar();
          }
      }
    }
    
    
    function resetProgressbar() {
      $bar.css({
       width: 0+'%' 
      });
      clearTimeout(tick);
    }
    
    startProgressbar();
  });
});

.gallery-container {
  position: relative;
}

.gallery_slides.is-fullscreen .gallery__slide{
  height: 100%;
}

.gallery__slide,
.gallery__slide figure{
   width: 100%;
}

.gallery__progress {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, .7);
}

.gallery__progress .progress {
  width: 0%;
  height: 5px;
  background: red;
}

.gallery__nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-transform: uppercase;
  font-size:12px; 
  color: #fff;
  letter-spacing: 3px;
}

.gallery__nav a::after {
  content: "";
  display: block;
  border-top: 1px solid $color-brand;
  width: 25px;
  position: absolute;
  top: 7px;
}

.gallery__nav a.next {
  right:30px;
}

.gallery__nav a.prev {
  left:30px;
}

.gallery__page-dots {
  list-style: none;
  display:block;
  width:100%;
  text-align: center;
  padding:0;
}

.gallery__page-dots li {
  display:inline-block;
  border:1px solid red;
  width:10px;
  height:10px;
  border-radius:100%;
  background:transparent;
  cursor:pointer;
  margin:0 10px;
}

.gallery__page-dots li.is-selected {
  background:red;
}

Lazar Momcilovic · Accepted Answer

Only the functions inside the each() method will be executed for each matched element.

You need to call flickity() plugin inside each() method in order for both sliders to be initialized.

Here's working DEMO

What you have to do is move your $('.gallery__slides').flickity(options); with all its variables inside each() method and both sliders will work:

$(document).ready(function(){

  $('.gallery-container').each(function(i, container) {

  var options = {
    cellSelector: '.gallery__slide',
    cellAlign : 'center',
    pageDots : false,
    prevNextButtons : false,
    accessibility : false,
    wrapAround : true,
    imagesLoaded : true,
    pauseAutoPlayOnHover: true,
    fullscreen: true,
    lazyLoad: 1
  };
  var time = 2;
  var $bar,
      $slider,
      isPause,
      tick,
      percentTime;

  $('.gallery__slides').flickity(options);

    var $container = $(container);
    var $slider = $container.find('.gallery__slides');
    var flkty = $slider.data('flickity');
    var selectedIndex = flkty.selectedIndex;

    var slideCount = flkty.slides.length;
    var $pagers = $container.find('.gallery__page-dots');

    for (i = 0; i < slideCount; i++) {
      $pagers.append('');
    }

    var $pager = $pagers.find('li');

    var $caption = $container.find('.gallery__caption .image-caption');

    $slider.on( 'select.flickity', function() {
      // set image caption using img's alt
      $caption.text( flkty.selectedElement.children[0].alt );
      $pager.filter('.is-selected').removeClass('is-selected');
      $pager.eq(flkty.selectedIndex).addClass('is-selected');
    });

    $pagers.on( 'click', 'li', function() {
      var index = $(this).index();
      resetProgressbar();
      $slider.flickity( 'select', index );
      startProgressbar();
    });

    // previous
    var $prev = $container.find('.prev');
    $prev.on( 'click', function() {
      resetProgressbar();
      $slider.flickity('previous');
      startProgressbar();
    });
    // next
    var $next = $container.find('.next');
    $next.on( 'click', function() {
      resetProgressbar();
      $slider.flickity('next');
      startProgressbar();
    });

    $bar = $container.find('.gallery__progress .progress');

    $slider.on({
      mouseenter: function() {
        isPause = true;
      },
      mouseleave: function() {
        isPause = false;
      }
    })

    function startProgressbar() {
      resetProgressbar();
      percentTime = 0;
      isPause = false;
      tick = setInterval(interval, 12);
    }

    function interval() {
      if(isPause === false) {
        percentTime += 1 / (time+0.1);
        $bar.css({
          width: percentTime+"%"
        });
        if(percentTime >= 100)
          {
            $slider.flickity('next', true);
            startProgressbar();
          }
      }
    }


    function resetProgressbar() {
      $bar.css({
       width: 0+'%' 
      });
      clearTimeout(tick);
    }

    startProgressbar();
  });
});

Multiple Flickity Carousels with custom navigations, page dots & progress bar

Answers (1)

Related Questions

Multiple Flickity Carousels with custom navigations, page dots &amp; progress bar

Answers (1)

Related Questions

Multiple Flickity Carousels with custom navigations, page dots & progress bar