Форум

ethereal · #1 (**permalink**) 04.09.2019, 21:44

Подскажите как добавить новые классы. Есть слайдер с таким кодом:

<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

Спасибо!

рони · #2 (**permalink**) 04.09.2019, 22:56

ethereal,
чем это решение не устроило
https://javascript.ru/forum/dom-wind...tml#post511408

ethereal · #3 (**permalink**) 04.09.2019, 23:04

Оно не работает когда есть несколько слайдов с классом .active... А я не знаю как переделать, и добавить для каждого .active уникальный класс.

рони · #4 (**permalink**) 04.09.2019, 23:32

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>

Форум

Справочник

Discord чат

Курсы javascript