How to make a slider with two simultaneous animations content?

The task of making a slider of the prototype in the photo. To the text slides has varied from one animation (fadeInLeft/fadeInRight), and image with another (fadeInUp/fadeInDown). Please give an answer possible from the simple to the complex. If none in stock there is no code in this slider, then at least the principle. And than it can be implemented? Given that you want the slides leafing through in automatic mode every 10 seconds and by pressing on the arrows. c6d785409f9d44dfa3a945397b7f802e.jpg
July 8th 19 at 11:36
2 answers
July 8th 19 at 11:38
Solution
The principle is simple, take virtually any slider and on the active class from the slide hang different animations for different tags (text, pictures, etc.). I use Owlcarousel.
July 8th 19 at 11:40
Solution
1. In the right block put all your images, run them on owl-carousel2. Take out the NAV in a separate div (option 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) { // open the default first slide and first caption
 $('.examples__captions .example-1').addClass('active');
}
 });

2. In the left block to put all the texts, each block with a particular text slide gives a sequence number. All units hide.
3. Each slide owl-carousel gives your index. When you change slides, just show the block with text, like this:
$('.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. Then set up the animation yourself or with the help of animate.css — that is, hung on slide transition and text some effects to taste.

Find more questions by tags JavaScriptHTMLCSSjQuery