Добавить класс к другому классу
Подскажите как добавить новые классы. Есть слайдер с таким кодом:
<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:42. |