Slick slider - Add class before li.slick-active dot

Question

I have Slick Slider (#my-slider) and I want to add class (.past) to the all .slick-dots li elements before li.slick-active one.

how it currently looks

how I want it to look

I tried the following:

(function ($) {
    jQuery(document).ready(function () {
        $('#my-slider').on('init', function(event, slick){
           var $items = slick.$dots.find('li.slick-active').prevAll();
           $items.addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

and this one

(function ($) {
    jQuery(document).ready(function () {
         $('#my-slider').on('init', function(event, slick){
           $('#my-slider .slick-dots li.slick-active').prevAll().addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

But no luck.

Slider works, but it doesn't give past class at all.

user_888894 · Answer

You could use beforeChange slick event to add/remove .past classes on all dots using the nextSlide value.

Note: You do not need to use jQuery(document).ready(function () { }); inside (function ($) { })(jQuery);. The first function is shorthand for doc ready, so you are calling doc ready twice. Remove jQuery(document).ready(function () { }); as it is not needed.

See live demo below for your problem with comments in code...

// our slick mySlider
let mySlider = $('#my-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true,
  pauseOnHover: false,
  pauseOnFocus: false,
  autoplaySpeed: 1000
});

// our mySlider dots
let dots = $('.slick-dots > LI', mySlider);

// before mySlider change slick event
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  // remove dot past classes on dots after next slide dot
  $(dots[nextSlide]).nextAll().removeClass('past');
  
  // add dot past classes on dots before next slide dot
  $(dots[nextSlide]).prevAll().addClass('past');
    
});

/* my-slider dots active and past css */

#my-slider .slick-dots LI.slick-active BUTTON::before,
#my-slider .slick-dots LI.slick-active BUTTON:focus {
  color: red;
  opacity: 1 !important;
}

#my-slider .slick-dots LI.past BUTTON::before,
#my-slider .slick-dots LI.past BUTTON:focus {
  opacity: 1;
}

#my-slider .slick-dots LI:not(.past) BUTTON:focus {
  opacity: .25;
}

/* my-slider demo css not needed */

BODY {
  margin: 0;
  padding: 20px;
}

#my-slider FIGURE {
  height: 120px;
  margin: 0;
  display: block;
  border: 1px solid black;
}

Here is fiddle version too: https://jsfiddle.net/joshmoto/mbrs3t9v/17/

Slick slider - Add class before li.slick-active dot

1 Answers