Как задать opacity, последнему блоку слайдера?

Question

[it_pear_yurec]

В slick слайдере имеется класс slick-current, ему можно задать значение opacity 0.3 и таким образом каждый первый видимый блок слайдера будет становится прозрачным на 70%. Как сделать тоже самое только с последним видимым блоком слайдера ?

<div class="slider-container">
							<div><img src="img/slider-1.png" alt=""></div>
							<div><img src="img/slider-2.png" alt=""></div>
							<div><img src="img/slider-3.png" alt=""></div>
							<div><img src="img/slider-4.png" alt=""></div>
							<div><img src="img/slider-5.png" alt=""></div>
							<div><img src="img/slider-6.png" alt=""></div>
							<div><img src="img/slider-1.png" alt=""></div>
							<div><img src="img/slider-2.png" alt=""></div>
							<div><img src="img/slider-3.png" alt=""></div>
							<div><img src="img/slider-4.png" alt=""></div>
							<div><img src="img/slider-5.png" alt=""></div>
							<div><img src="img/slider-6.png" alt=""></div>
						</div>

<script>
		$(document).ready(function(){
			$('.slider-container').slick({
			  slidesToShow: 5,
			  slidesToScroll: 1,
			  autoplay: true,
			  autoplaySpeed: 2000,
			});
		});
	</script>

Код стилизации slick-current

.slick-current img{
    transition: all .3s;
    opacity: 0.3;
}

Answer 1

[Stimulate]

Забавы ради, может натолкнёт на мысли

jQuery('.slider-container').children('.slick-slide').css('opacity', 1);
jQuery('.slider-container').children('.slick-slide.slick-active').last().css('opacity', 0.4);

Либо css

.slick-slide.slick-active:last-of-type {
opacity: 0.4;
}

Comments

[it_pear_yurec]

говорю же, закрашивает навсегда, я прописывал вот так $('.slider-container').find('.slick-active').last().css('opacity', '0.3');

[Stimulate]

it_pear_yurec, поэтому я и предложил сначала давать всем слайдам прозрачность равную единице, а уж потом менять у которого необходимо, разумеется код этот нужно запускать при каждом клике по слайдеру.

[it_pear_yurec]

Stimulate, неа, все равно не хочет(

[Stimulate]

it_pear_yurec,

jQuery('.slider-container').on('afterChange', function(event){
jQuery(this).children('.slick-slide').css('opacity', 1);
jQuery(this).children('.slick-slide.slick-active').last().css('opacity', 0.4);
});

[it_pear_yurec]

Stimulate, большое спасибо!! а что такое afterChange ?)

[Stimulate]

it_pear_yurec, функция, срабатывающая после перехода по слайдеру, есть в документации.

Answer 2

[Орхан Гасанлы]

А вариант ::last-child не пробовали? Или это не сработало?
htmlbook.ru/css/last-child

Comments

[it_pear_yurec]

нет, он закрашивает их навсегда