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

时间:2017-07-31 19:26:53

标签: javascript html css slick.js

我已为我的网页实施了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,
  });
});

1 个答案:

答案 0 :(得分:2)

您的问题是您没有在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,
  });
});
相关问题