Question

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

我想在最后一张幻灯片到达滑块时从第一张幻灯片播放滑块而不是最后一张幻灯片。

最初，当无限滚动为'真'时，一切正常。但由于要求，我必须将无限滚动设置为'false'。当无限滚动设置为'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);
    });

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

4 个答案: