How to implement slick-carousel autoplay

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.