Как сделать анимацию внутренних элементов owl carousel?

Question

[Rodge]

Недавно я задавал вопрос схожий с этим, сейчас же я немного продвинулся в нахождении решения. Что я делаю: я пытаюсь при слайдинге карусели давать анимацию её внутренним элементам. Вот тот код который у меня получился:

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.on('changed.owl.carousel', function(event) {
	$(".header-text").removeClass("slider-text-anim");
	if ( $(".owl-item").hasClass("active") ) {
		$(".header-text").addClass("slider-text-anim");
	}
	else {
		$(".header-text").removeClass("slider-text-anim");
	}
});

Но проблема в том что класс "slider-text-anim" никогда не удалиться, при том что какой-то слайд всегда имеет класс active. Помогите с решение проблемы, как мне сделать так, что-бы проверялся именно этот слайд который именно сейчас был active а не тот который стал? Добавить класс каждому айтему это плохая идея(и не возможная). Если вы знаете ответ, и так-же сталкивались с такой проблемой, прошу вас помочь.

Answer 1

[Максим Тимофеев]

Есть скрипты, в которых это уже реализовано, возможно стоит использовать готовое?
Например:
bayguzin.ru/demo/ParallaxContentSlider
jacksbox.de/stuff/jquery-fractionslider
https://www.sequencejs.com/
Собственно искать подобные можно по запросу "слайдер parallax"

Comments

[Rodge]

Знаю что можно использовать готовые варианты, но хочется сделать это именно с owl carousel. И не потому-что не хочется изучать новые framework'и, а потому-что хочется научиться делать это с owl carousel, получить опыт, и использовать в дальнейшем.

[Максим Тимофеев]

1. скрипты которые я привел вряд ли можно назвать framework-ами.
2. если учитесь - то надо писать свой слайдер, а не использовать готовое
3.

и использовать в дальнейшем

не стоит использовать 1 решение для решения всех задач. Каждое решение имеет определенный спектр задач, которые оправданно решать с помощью него.
4. Конечно я исхожу из логики, и если Вас просто "прёт" эта задача и конечный результат не имеет значения - то не смею останавливать.

Answer 2

[Николай]

Делай анимацию через css, используя класс active.

Comments

[gangstas_oh]

У этого есть один нюанс:
Родительский блок имеет свойство transform: translate3d();
Иногда его значения ещё до полной смены слайда меняются, например transform: translate3d(-2166px, 0px, 0px); Становится transform: translate3d(-1366px, 0px, 0px);
Как итог, блок active уже невидим и анимации нет