CODEWITHSUNDEEP
javascriptslick.jsautoplay
Ratiu Gabriel
Ratiu Gabriel

Reputation: 11

How to implement slick-carousel autoplay

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.sstatic.net/Wfjp3.png

Upvotes: 1

Views: 1222

Answers (2)

Ed Lucas
Ed Lucas

Reputation: 7355

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.

Upvotes: 0

nihiser
nihiser

Reputation: 604

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

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

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

Upvotes: 1

Related Questions