Как в слайдере стилизовать слайд, идущий перед центральным?
Есть задача сделать слайдер из пяти активных слайдов: центральный - крупный, по бокам от него - чуть меньшего размера, крайние - стандартного. На чистом css получается стилизовать только центральный и следующий за ним:
let owl = $('.owl-carousel');
owl.owlCarousel({
center: true,
items: 5,
loop: true,
nav: true
});.container {
max-width: 1400px;
margin: 50px auto;
}
.slider {
border: 1px solid red;
}
.slide {
padding: 50px 0;
transition: .5s;
}
.slide img {
display: block;
max-width: 100%;
}
.owl-item.center {
transform: scale(1.5) !important;
transition: .3s;
position: relative;
z-index: 2;
}
.owl-item.center + .owl-item {
transform: scale(1.25);
transition: .3s;
position: relative;
z-index: 1;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="container">
<div class="slider owl-carousel">
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
</div>
</div>Пробовал с помощью js добавлять предыдущему слайду класс и стилизовать таким образом, но работает это дело криво - класс при перелистывании слайдера добавляется другому элементу:
/а здесь в сниппете почему-то вообще ничего не добавляется/
let owl = $('.owl-carousel');
owl.owlCarousel({
center: true,
items: 5,
loop: true,
nav: true
});
$('.owl-item.active.center').prev().addClass('prev');
owl.on('changed.owl.carousel', function(event) {
$('.owl-item').removeClass('prev');
$('.owl-item.active.center').prev().addClass('prev');
});.container {
max-width: 1400px;
margin: 50px auto;
}
.slider {
border: 1px solid red;
}
.slide {
padding: 50px 0;
transition: .5s;
}
.slide img {
display: block;
max-width: 100%;
}
.owl-item.center {
transform: scale(1.5) !important;
transition: .3s;
position: relative !important;
z-index: 2;
}
.owl-item.center + .owl-item,
.owl-item.prev {
transform: scale(1.25);
transition: .3s;
position: relative;
z-index: 1;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="container">
<div class="slider owl-carousel">
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
</div>
</div>Подскажите, как можно стилизовать предыдущий от центрального слайд?
Ответы (1 шт):
Автор решения: Евгений Ли
→ Ссылка
Вот держи. Костыль конечно конкретный, но что поделаешь. В стилях последние строки добавил, сравнишь с старым кодом и поймёшь, что я добавил)). Z-index сам допишешь после центрового который, времени нет поправлять.
let owl = $('.owl-carousel');
owl.owlCarousel({
center: true,
items: 5,
loop: true,
nav: true
});
$('.owl-item.active.center').prev().addClass('prev');
owl.on('changed.owl.carousel', function(event) {
$('.owl-item').removeClass('prev');
$('.owl-item.active.center').prev().addClass('prev');
});.container {
max-width: 1400px;
margin: 50px auto;
}
.slider {
border: 1px solid red;
}
.slide {
padding: 50px 0;
transition: .5s;
}
.slide img {
display: block;
max-width: 100%;
}
.owl-item.center {
transform: scale(1.5) !important;
transition: .3s;
position: relative !important;
z-index: 3;
}
.owl-item.center + .owl-item,
.owl-item.active + .owl-item {
transform: scale(1.25);
transition: .3s;
position: relative;
z-index: 2;
}
.owl-item.center + .owl-item + .owl-item, .owl-item.center + .owl-item + .owl-item + .owl-item {
transform: scale(1);
z-index: 1;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="container">
<div class="slider owl-carousel">
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
<div class="slide"><img src="https://s1.1zoom.ru/big3/421/343461-svetik.jpg" alt=""></div>
</div>
</div>