Как сделать так, чтобы 2 боковые картинки были прозрачными (oppacity)?
Соответственно, при прокрутке чтобы все крайние также становились прозрачными. Делала с помощью slick-slider, но почему-то их свойства касательно прозрачности не работают.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак то так:
jQuery('#home_latest').slick({
slidesToShow: 1,
centerMode: true,
dots: false,
centerPadding: '220px',
prevArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_left'><img src='assets/img/slider-left-arrow.png'></a>",
nextArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_right'><img src='assets/img/slider-right-arrow.png'></a>",
});
.slick-slide:not(.slick-active) {
opacity: 0.5;
}
.slick-list {
overflow: hidden;
max-width: 600px;
margin: 0 auto;
}
.slider__block{
background: blue;
}
.slick-track{
display: flex;
align-items: flex-start;
padding-bottom: 40px;
}
.slider {
position: relative;
padding: 0px 60px;
}
.slider .slick-arrow{
position: absolute;
top: 50%;
margin: -30px 30px 0px;
z-index: 10;
font-size: 0;
width: 45px;
height: 83px;
border: none;
opacity: 0.65;
}
.slider .slick-arrow:hover {
opacity: 0.4;
}
.item{
overflow: hidden
position: relative
}
.item img{
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div id="home_latest">
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
<div class="item">
<img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
</div>
</div>
</div>
Вот нужный вам стиль
.slick-slide:not(.slick-active) {
opacity: 0.5;
}