Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.09.2019, 21:44
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Добавить класс к другому классу
Подскажите как добавить новые классы. Есть слайдер с таким кодом:
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ethereal,
чем это решение не устроило
https://javascript.ru/forum/dom-wind...tml#post511408
Ответить с цитированием
  #3 (permalink)  
Старый 04.09.2019, 23:04
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

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

Последний раз редактировалось ethereal, 04.09.2019 в 23:06.
Ответить с цитированием
  #4 (permalink)  
Старый 04.09.2019, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 04.09.2019 в 23:49.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Owl Carousel - добавить и удалить класс при смене слайда ethereal Элементы интерфейса 1 08.08.2019 22:47
Как добавить класс при удержание нажатия на элемент ethereal Элементы интерфейса 1 05.08.2019 05:15
Добавить класс к другому классу dany994 Элементы интерфейса 1 16.05.2019 23:47
Добавить класс дочернему элементу rafaello Элементы интерфейса 5 16.04.2018 17:58
Добавить / удалить класс кликом fabrique Общие вопросы Javascript 4 03.09.2014 04:43