Javascript.RU

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

Owl Carousel - добавить и удалить класс при смене слайда
Здравствуйте!
Помогите написать не большой скрипт.

Есть слайдер Owl Carousel:
<div class="owl-carousel owl-theme">
  <div class="owl-stage-outer">
    <div class="owl-stage">
      <div class="item"><h4>1</h4></div>
      <div class="item"><h4>2</h4></div>
      <div class="item active"><h4>3</h4></div>
      <div class="item"><h4>4</h4></div>
      <div class="item"><h4>5</h4></div>
      <div class="item"><h4>6</h4></div>
    </div>
  </div>
</div>


К активному слайлу добавляется класс "active", нужно добавить несколько новых классов при смене класса active на другой слайд.

Пример:
<div class="owl-carousel owl-theme">
  <div class="owl-stage-outer">
    <div class="owl-stage new-class1">
      <div class="item"><h4>1</h4></div>
      <div class="item"><h4>2</h4></div>
      <div class="item new-class2"><h4>3</h4></div>
      <div class="item active new-class3"><h4>4</h4></div>
      <div class="item new-class4"><h4>5</h4></div>
      <div class="item"><h4>6</h4></div>
    </div>
  </div>
</div>


Когда класс "active" меняется, добавить еще 4 класса... Один класс добавить к самому active, еще по одному до и после active, и один класс к "owl-stage".

Затем эти новые классы должны автоматически удалятся через 2с и вновь добавлятся при следующей смене класса "active".

Демо: https://codepen.io/anakin-skywalker94/pen/WVJwNE

Помогите пожалуйста кто знает как сделать, очень надо.

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2019, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ethereal,
var timer;
var owl = $('.owl-carousel').owlCarousel({
    onTranslated: function(event) {
        window.clearTimeout(timer);
        var page = event.page.index;
        var stage = $('.owl-stage', owl).addClass('new-class1');
        var items = $('.owl-item', owl).removeClass('new-class2 new-class3 new-class4');
        var active = items.eq(page).addClass('new-class3');
        active.next().addClass('new-class4');
        active.prev().addClass('new-class2');
        timer = window.setTimeout(function() {
            items.removeClass('new-class2 new-class3 new-class4');
            stage.removeClass('new-class1')
        }, 2000)
    },
    loop: true,
    margin: 10,
    nav: true,
    loop: false,
    responsive: {
        0: {
            items: 1
        }
    }
});

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить / удалить класс кликом fabrique Общие вопросы Javascript 4 03.09.2014 04:43
Повторное срабатывание .load() у iframe при смене его src vita1ii Events/DOM/Window 5 09.10.2013 13:49
Как добавить класс к нужному элементу при наведении на определеные ссылки? crazygangster77 Events/DOM/Window 3 05.06.2013 02:19
Как добавить прозрачность картинке при клике на li в IE??? Андрей Лебедев Internet Explorer 4 10.02.2013 06:04
Событие при смене слайда в AnythingSlider Gurylyov jQuery 4 01.12.2011 17:48