Добавить класс к другому классу
Подскажите как добавить новые классы. Есть слайдер с таким кодом:
<div class="owl-carousel owl-one"> <div> 1 </div> <div class="active"> 2 </div> <div class="active"> 3 </div> <div class="active"> 4 </div> <div> 5 </div> <div> 6 </div> </div> Классы ".active" автоматически добавляются и удаляются. Как добавить к каждому классу "active" еще по одному классу? Что бы было вот так: <div class="owl-carousel owl-one"> <div> 1 </div> <div class="active s-1"> 2 </div> <div class="active s-2"> 3 </div> <div class="active s-3"> 4 </div> <div> 5 </div> <div> 6 </div> </div> И что бы классы "s-1, s-2, s-3" менялись вместе с ".active". Вот Демо: https://codepen.io/anakin-skywalker94/pen/ExYbvpw Спасибо! |
|
Оно не работает когда есть несколько слайдов с классом .active... А я не знаю как переделать, и добавить для каждого .active уникальный класс.
|
OwlCarousel три класса для центра
ethereal,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Anakin_Sky</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css'>
<style>
.owl-item {
width: 300px;
height: 300px;
background-color: coral;
}
.a-hover {
transform: scale(0.8) !important;
}
button {
width: 40px;
height: 40px;
}
.owl-item.active{
transition: all 0.7s ease !important;
}
.owl-item.active.s-1{
background-color: #FFFF00;
}
.owl-item.active.s-2{
background-color: #FF0000;
}
.owl-item.active.s-3{
background-color: #0000FF;
}
</style>
</head>
<body translate="no">
<div class="owl-carousel owl-one">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
<div> 8 </div>
<div> 9 </div>
<div> 10 </div>
<div> 11 </div>
<div> 12 </div>
<div> 13 </div>
<div> 14 </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
<script>
var owl = $(".owl-one").owlCarousel({
onTranslate: function() {
$(".owl-item", owl).removeClass("s-1 s-2 s-3")
},
onTranslated: owladdClass,
onInitialized: owladdClass,
loop: true,
margin: 20,
nav: true,
loop: false,
smartSpeed: 1E3,
responsive: {
0: {
items: 3
}
}
});
function owladdClass() {
var active = $(".owl-item.active", owl);
active.eq(0).addClass("s-1");
active.eq(1).addClass("s-2");
active.eq(2).addClass("s-3")
}
owl.trigger("translated.owl.carousel");
owl.on("wheel", function(e) {
if (e.originalEvent.deltaY > 0) owl.trigger("prev.owl.carousel");
else owl.trigger("next.owl.carousel");
e.preventDefault()
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:32. |