Влад Державин

mySwiper.on('slideChangeTransitionStart', function () {
    document.getElementsByClassName('slider-item')[mySwiper.realIndex + 1].classList.add('ваш класс')
});

Но вам нужно будет позаботиться, как удалить его (это не сложно), что бы ваш класс был только у одного элемента.

Читайте документацию, там довольно все понятно описано - idangero.us/swiper/api

всегда читайте апи
idangero.us/swiper/api

mySwiper.on('slideChange', function () {
 $('div').addClass('class');
});

Оказалось дело в том что эти кейфрэймы анимируют одно и то же свойство transform. а так делать нельзя

При инициализации скрипта добавить параметр:

$('.carousel').owlCarousel({
  ...,
  navContainer: ".navigation"
})

В html-коде добавить блок с классом "navigation".
P.S. Изучите документацию, там есть описание параметров.