带有自定义导航、页面点和进度条的多个 Flickity 轮播

Question

我有一个旋转木马，当我第一次构建它时，每页只需要一个。但是我现在需要在一页上有多个轮播。我一直在更新代码以允许多个轮播，包括更新自定义导航和点。

但是我运行遇到了一些问题，当您有多个轮播时，第一个轮播不再自动播放或显示进度条。第二个轮播 (below it in example) 自动播放并显示进度条。

这是我的代码：

$(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('<li class="gallery__page-dot-item"></li>');
    }

    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;
}

<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>



<div class="gallery-container">
                    <div class="gallery__slides">
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 1 ">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 2 ">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 3">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 4">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 5">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 6">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 7">
                        </div>
                    </div>
                    <div class="gallery__progress">
                        <div class="progress"></div>
                    </div>
                    <div class="gallery__caption">
                        <p class="image-caption"></p>
                    </div>
                    <ol class="gallery__page-dots">
                        
                    </ol>
                    <div class="gallery__nav">
                        <a href="#" class="prev">Previous</a>
                        <a href="#" class="next">Next</a>
                    </div>
                    
                </div>

                <div class="gallery-container">
                    <div class="gallery__slides">
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 1 ">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 2 ">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 3">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 4">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 5">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 6">
                        </div>
                        <div class="gallery__slide">
                            <img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 7">
                        </div>
                    </div>
                    <div class="gallery__progress">
                        <div class="progress"></div>
                    </div>
                    <div class="gallery__caption">
                        <p class="image-caption"></p>
                    </div>
                    <ol class="gallery__page-dots">
                        
                    </ol>
                    <div class="gallery__nav">
                        <a href="#" class="prev">Previous</a>
                        <a href="#" class="next">Next</a>
                    </div>
                    
                </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Answer 1

只有each()方法中的函数才会对每个匹配的元素执行。

您需要在 each() 方法中调用 flickity() 插件，以便初始化两个滑块。

这是工作DEMO

您需要做的是将 $('.gallery__slides').flickity(options); 及其所有变量移动到 each() 方法中，两个滑块都会起作用：

$(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('<li class="gallery__page-dot-item"></li>');
    }

    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();
  });
});

带有自定义导航、页面点和进度条的多个 Flickity 轮播

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

html

javascript

jquery

flickity