Question

我是Web开发人员的新手，很抱歉，如果我的英语不好。我正在尝试在此部分自动实现工具提示的Slick自动播放。我已经实现了完美工作的箭头，但是除此之外，我还需要自动播放。有人可以给我一些如何自动播放轮播的想法吗？

[HTML]

<section class="section showcase" id="section2">
  <div class="second-background"></div>
  <div class="map" id="pin-container">
     <div class="slider">
       <i class="fas fa-chevron-left slide-left"></i>
       <i class="fas fa-chevron-right slide-right"></i>
     </div>
  </div>
</section>

[JS]

function initServicesSlider() {
   var width = $(window).width();

   if (width <= 992) {
      $('.service-slider').slick({
         mobileFirst: true,
         touchThreshold: 10,
      });
      $('.services div .slide-right').click(function () {
         $('.service-slider').slick('slickNext');
      });
      $('.services div .slide-left').click(function () {
         $('.service-slider').slick('slickPrev');
      });
}

必须与以下内容有关：

$(.'service-slider').slick({
  autoplay: true,
  autoplaySpeed: 3000,
})

但我不知道如何实现。

PS：我确实导入了光滑轮播

感谢帮助！：）

https://i.stack.imgur.com/Wfjp3.png

Answer 1

这里有几件事：

您需要关闭if语句

 if (width <= 992) {
      $('.service-slider').slick({
         mobileFirst: true,
         touchThreshold: 10,
      });
      $('.services div .slide-right').click(function () {
         $('.service-slider').slick('slickNext');
      });
      $('.services div .slide-left').click(function () {
         $('.service-slider').slick('slickPrev');
      });
  }

$(.'service-slider')应该为$('.service-slider').slick...（将句点移到字符串中）。
您正在调用的类在上面的HTML中不存在。您只需要致电$('.slider').slick...。

Answer 2

除了@nihiser建议的标记修复＃1和＃2之外，您还应在一次调用中合并所有Slick初始化代码：

$('.service-slider').slick({
  mobileFirst: true,
  touchThreshold: 10,
  autoplay: true,
  autoplaySpeed: 3000,
});

这是假设您要在幻灯片中添加如下所示的标记：

    <div class="slider">
       <div class="service-slider">
           <div>Slide 1 Contents</div>
           <div>Slide 2 Contents</div>
           <div>Slide 3 Contents</div>
           ...
       </div>
       <i class="fas fa-chevron-left slide-left"></i>
       <i class="fas fa-chevron-right slide-right"></i>
   </div>

您不想在包含幻灯片的<div>中包含箭头，否则Slick会将其视为其他幻灯片。

如何实现轮播自动播放

2 个答案: