Javascript slick.js 旋转木马向后拖动多个幻灯片超过第一个元素不起作用

Question

使用 Swift.js 我有一个无限滚动=true 的旋转木马，除了一个问题外，它工作得很好：

当被视为 1 | 2 | 3个向右拖动大于一张幻灯片的任何内容都不起作用，并将位置重置为上一张。

这是 swift 文档：http://kenwheeler.github.io/slick/

这里有一个例子：https://jsfiddle.net/mcaidans/xk4w8mdc/5/

尝试从 1 拖动 | 2 | 3 到 6 | 7 | 1.

$(document).ready(function() {
  $('.carousel-slick').slick({
    infinite: true,
    slidesToShow: 3,
    swipeToSlide: true,
    slidesToScroll: 1,
    cssEase: 'ease-out',
    nextArrow: '<i class="slick-btn-next fas fa-arrow-alt-circle-right"></i>',
    prevArrow: '<i class="slick-btn-prev fas fa-arrow-alt-circle-left"></i>',

  });
  /*.on('beforeChange', (event, slick, currentSlide, nextSlide) => {
              if (currentSlide !== nextSlide) {
                  document.querySelectorAll('.slick-center + .slick-cloned').forEach((next) => {
                      // timeout required or Slick will overwrite the classes
                      setTimeout(() => next.classList.add('slick-current', 'slick-center'));
                  });
              }
          });*/
});

.box {
  display: block;
  height: 100px !important;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  </head>

  <body>
    <div class="carousel-slick">
      <a class="box">
        <p>1</p>
      </a>
      <a class="box">
        <p>2</p>
      </a>
      <a class="box">
        <p>3</p>
      </a>
      <a class="box">
        <p>4</p>
      </a>
      <a class="box">
        <p>5</p>
      </a>
      <a class="box">
        <p>6</p>
      </a>
      <a class="box">
        <p>7</p>
      </a>
    </div>
  </body>

</html>

Answer 1

Slick 已经将近一年没有维护了，所以我建议您在这个错误尚未修复的情况下使用其他工具：flickity

https://jsfiddle.net/tz83oL7s/2/

$(document).ready(function() {
        $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
        });
    });

.carousel-cell {
  width: 33%;
  height: 100px!important;
  border: 1px solid black;
}

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    
</head>

<body>
<div class="carousel js-flickity"
  data-flickity='{ "contain": true, "prevNextButtons": false, "pageDots": false, "wrapAround": true, "initialIndex": 0, "cellAlign": "left"  }'>
<a class="carousel-cell"><p>1</p></a>
<a class="carousel-cell"><p>2</p></a>
<a class="carousel-cell"><p>3</p></a>
<a class="carousel-cell"><p>4</p></a>
<a class="carousel-cell"><p>5</p></a>
<a class="carousel-cell"><p>6</p></a>
<a class="carousel-cell"><p>7</p></a>
</div>
</body>
</html>

Javascript slick.js 旋转木马向后拖动多个幻灯片超过第一个元素不起作用

Javascript slick.js carousel dragging more than one slide backwards past first element not working

javascript

slick.js