如何实现圆滑的轮播自动播放

Question

I'm pretty new to web dev and sorry if my English is broken. I'm trying to implement Slick autoplay on this section where the tooltips should appear automatically. I have implemented the arrows which work perfectly, but beside this I also need the autoplay. Can someone give me any ideas how to slick-carousel autoplay?

[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');
      });
}

It has to be something with:

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

but I don't know how to implement it.

PS: I did import slick-carousel

Thanks for the help !:)

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

Answer 1

There are a few things here:

1. You need to close the if statement

 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');
      });
  }

2. $(.'service-slider') should be $('.service-slider').slick... (moving the period into the string).

3. You are calling a class that, in your HTML above, does not exist. You just need to call $('.slider').slick... .

Answer 2

In addition to the markup fixes #1 and #2 recommended by @nihiser, you should combine all of your Slick initialization code in one call:

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

This is assuming that you are including your slides with markup that looks like this:

    <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>

You don't want to include your arrows in the <div> that contains your slides or Slick will treat them as additional slides.