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

【问题标题】：Slick Slider Autoplay not Working光滑的滑块自动播放不起作用
【发布时间】：2017-07-31 19:26:52
【问题描述】：

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

【问题讨论】：

你能添加你用于光滑滑块的脚本吗？
请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
@j08691 感谢您的提醒。我发布了一些代码，外部css和脚本文件中有很多附加代码。让我知道我是否应该找到其中任何一个并将其添加到主帖中。

标签： javascript html css slick.js

【解决方案1】：

你的问题是你没有在你的.single-item上设置autoplay

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

<script type="text/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,
      });
    });
</script>

【讨论】：

哈哈哈@Gael，你太快了；）感谢您为我编辑它：）
编辑问题的人更快:)
@AlexBanman 我实际上已经编辑了我的答案。您两次启动了光滑的滑块。一次在名为.single-item 的元素上，一次在名为.autoplay 的元素上。这实际上是他们示例中使用的技巧，您必须确保将自动播放字段设置为 single-item 函数，因为您的站点没有一组名为 autoplay 的元素，您实际上可以将其从代码:)
如果它可以帮助您更好地理解它，当您调用 $('.single-item').slick({ ........ }); 时，您实际上是在告诉您的 slick 脚本，您正在使用类 single-item 和参数/设置是您在大括号之间包含的内容 - 这有帮助吗？
哈哈哈我的经验太少了，我只是偶尔和slick一起玩，最后，我们都只是玩:)事实并非如此，更多的是没有具有.autoplay 类的元素，因此它忽略了第二次初始化。祝你好运！