I'm using slick.js carousel, I need to set different styles to the all the slides that comes before and all the slides that comes after the centered one.

So I used these css style rules:

.slick-slide{background-color:lime;}
.slick-center{background-color:blue;}
.slick-center ~ .slick-slide{background-color:red;}

I have two issues:

1. The .slick-center class, with 5 elements sliding for example, at the end of the slide's animation is not applied to the centered slide: https://codepen.io/jean-chiementin/pen/NWYXZmB

2. By using '.slick-center ~ .slick-slide' at the end of the slide's animation before the slide return to the start position all slides becomes red:https://codepen.io/jean-chiementin/pen/RwMQbWv

So how can I set specific classes for before,center,after slides using jquery or javascript?

CodePudding user response：

I'm not sure about a css solution but you could use the slider change event to work out which side the current (centre) and from there find the sides on either side

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

I hope this helps

CodePudding user response：

I tried this and it works but the class is added after the animation slide, if I use beforeChange event it add the class on the slide that was the current before the animation slide:

$('.cont').on('afterChange', function(event, slick, currentSlide, nextSlide){

    $(".slick-slide").each(function(){
      var mio_attr = $(this).attr('data-slick-index');
      if(mio_attr == currentSlide){
        $(this).addClass('my_current');
      }
      else{$(this).removeClass('my_current');}
    });
  

});

here the pencode example