Slick: Need to add opacity to two centred slides.

[guddu1315]

Here you can find the jsfiddle (https://jsfiddle.net/6gdadqyp/10/)

I need to display 4 slides. 2 centred slides.... and other two half as you can see in JSfiddle. I have used centerpadding to achieve this. Now the problem is, by default i will apply opacity:0 to all the slide items, and i want remove the opacity from two centred slides.

So i have applied opacity: 1 to .slick-active classes. But that class is applied on 2nd, 3rd and 4th slides. I need to apply that opacity only to 2nd and 3rd slides.

Any idea how i can achieve that?

Also for larger screens i need to change the following parameters

slidesToShow : 4,
slidesToScroll : 4,

So in that case also i have to keep in mind that only the centred slides removes the class. So 2nd, 3rd and 4th slides will remove opacity on larger screens?

Any help will be appreciated.

Thanks.

[ahmadalfy]

The problem I think is that the cloned slides copy the elements with all its classes. So it is picking the slick-active class.

A quick fix could be simple CSS trick like this https://jsfiddle.net/ahmad/6gdadqyp/20/

.slick-active + .slick-active ~ .slick-slide {
   opacity: 0.5;
}