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

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

Спасибо!

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
        }
    }
});