光滑的滑块从自动播放循环中的第一个滑块自动播放

Question

Slick 滑块设置为自动播放。在播放时，幻灯片从左到右或从头到尾。当滑块到达最后一张幻灯片时，它开始从最后一张幻灯片向后自动播放到第一张幻灯片。

当滑块到达最后一张幻灯片时，我希望滑块从第一张而不是最后一张开始播放。

最初当无限滚动为“真”时，一切正常。 但由于要求，我不得不将无限滚动设置为“假”。当无限滚动设置为'false'时出现上述问题。

这里是Fiddle。

$(document).ready(function() {

  $('.slider-1').slick({
    dots: true,
    infinite: false,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 3,
    slidesToScroll: 3,
  });

  $('.slider-2').slick({
    dots: true,
    infinite: false,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    cssEase: 'linear'
  });

});

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/css/prism.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<section id="features" class="blue">
<div class="content">
  <div class="slider slider-1">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
  </div>

  <div class="slider slider-2">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
  </div>
</div>
</section>

如果有人有解决方案/建议，请提供帮助。 提前致谢。

Answer 1

试试这个代码：

$('.slider-2').slick({
        dots: true,
        autoplay: true,
        autoplaySpeed: 1000,
        pauseOnFocus: false,
        pauseOnHover: false,
        pauseOnDotsHover: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        cssEase: 'linear'
    });

Answer 2

这个问题我已经有一段时间了，更新无限值infinite: true, 解决了我的问题。

Answer 3

对我来说，它通过使用 beforeChange 事件的代码来工作。

 $('.partner-crousal').slick({


        infinite: true,
        autoplay: true,
        autoplaySpeed: 0,
        cssEase: 'linear',
        variableWidth: true,
        draggable: false,

        centerPadding: '10px',
        arrows: true,
        pauseOnHover: true,
        pauseOnFocus: true,

    }).on("beforeChange", function(e, slick) {
        var width = $('.partner-crousal .slick-current').outerWidth();
        var speed = (width * 3000) / 200;
        $('.partner-crousal').slick("setOption", "speed", speed);
    });

Answer 4

$(document).ready(function() {

  $('.slider-1').slick({
    dots: true,
    infinite: 0,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 3,
    slidesToScroll: 3,
  });

  $('.slider-2').slick({
    dots: true,
    infinite: 0,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    cssEase: 'linear'
  });

});