Как сделать слайдер с двумя одновременными анимациями контента?

Question

[Алексей]

Задача сделать слайдер по прототипу на фото. Чтобы текст слайдов менялся с одной анимацией (fadeInLeft/fadeInRight), а изображения с другой (fadeInUp/fadeInDown). Просьба дать ответ по возможности от простого к сложному. Если ни у кого в запасе нет кода подобного слайдера, тогда хотя бы принцип. Как и на чем это можно реализовать? Учитывая, что нужно, чтобы слайды листались в автоматическом режиме каждые 10 секунд и по нажатию на стрелочки.

Answer 1

[Алексей]

Принцип простой, берете практически любой слайдер и на класс active у слайда вешаете разные анимации для разных тегов (текст, картинки и т.д.). Я пользуюсь Owlcarousel.

Answer 2

[Alex Shalin]

1. В правый блок кладете все свои картинки, запускаете на них owl-carousel2. Выносите навигацию в отдельный див (опция navContainer).

$('.examples__slider').owlCarousel({
		loop : true,
		dots:true,
		nav: true,
		navContainer : ' .slider__nav',
		mouseDrag : true,
		touchDrag : true,
		autoplay : false,
		autoplayHoverPause : true,
		autoplayTimeout : 4000,
		smartSpeed : 200,
		slideSpeed : 200,
		rewindSpeed: 500,
		onInitialized: function(e) { // открываете по умолчанию первый слайд и первую подпись к нему
		$('.examples__captions .example-1').addClass('active');
  }
	});

2. В левый блок кладете все свои тексты, каждому блоку с конкретным текстом слайда даете порядковый номер. Все блоки скрываете.
3. Каждому слайду owl-carousel дает свой индекс. При смене слайдов, просто показываете соответствующий блок с текстом, как-то так:

$('.examples__slider').on('changed.owl.carousel', function(e) {
		var current = e.page.index + 1;
		$('.examples__captions .example').removeClass('active');
		$('.examples__captions .example-'+current).addClass('active');
	});

4. Дальше настраиваете анимации: сами или с помощью animate.css — то есть, навешиваете по смене слайдов и текста какие-то эффекты по вкусу.