@it_pear_yurec

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

В 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;
}


5a8d5df3a8985943700796.jpeg
  • Вопрос задан
  • 835 просмотров
Решения вопроса 1
Stimulate
@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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
azerphoenix
@azerphoenix
Java Software Engineer
А вариант ::last-child не пробовали? Или это не сработало?
htmlbook.ru/css/last-child
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы