Question

我已为我的网页实施了slick slider。滑动工作得很好，图像一个接一个地显示。我唯一遇到的问题是在页面加载完成后让滑块启动autoplay。

Here's链接到我的页面。

HTML

<div class="single-item insideslideshow slider autoplay slickplay">
    <div class="eachsliderimage" style="background-image: url('images/real-estate/2.jpg');"></div>
    <div class="eachsliderimage" style="background-image: url('images/real-estate/1.jpg'); "></div>
    <div class="eachsliderimage" style="background-image: url('images/real-estate/3.gif'); "></div>
    <div class="eachsliderimage" style="background-image: url('images/real-estate/4.jpg'); "></div>
</div>

JavaScript代码：

<script type="text/javascript">
$(document).ready(function(){
  $('.single-item').slick({
      draggable: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      touchThreshold: 1000,
  });
    $('.autoplay').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
  });
});

Answer 1

您的问题是您没有在autoplay

上设置.single-item

如果您将JavaScript更改为以下代码，它将起作用：

$(document).ready(function(){
  $('.single-item').slick({
      draggable: true,
      autoplay: true, /* this is the new line */
      autoplaySpeed: 2000,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      touchThreshold: 1000,
  });
});

光滑的滑块自动播放不起作用

1 个答案: