Custom Inner Content Animations with Slick Slider | Slick Slider Animation Effects Simplified

Показать описание

How to use custom text animations with Slick Slider easily? Or how to animate inner content for slides in a slider? How to apply slick slider animation effects to inner content? In this video we will create a responsive slider with custom text animation inside each slide. We will create a slider with text animation. For that we will take example of Slick Slider.

Slick Slider is usually part of almost every website, used in header banner, in testimonials, teams, projects showcase and much more. We can slide images or DIVs with it. Each DIV becomes a slide. It is a good slider but because of it's minimalist configuration, it does not provide content animation that is inside the slide. In this video we will enhance Slick Slider and add cool custom CSS animations inside each slide.

In my HTML page I have linked a custom CSS file, Twitter Bootstrap and jQuery. jQuery is dependency for slick slider. We will link Slick Slider by using CDN links. It's a jQuery based slider. We will need CSS file and JavaScript file from Slick Slider plugin. I will link its CSS files in header and JS file in footer. After that we will initialize slider with custom settings. Slider is working but we will have to style the inner content for it's slides. We will move content over slide and in the middle. Now each slide with move or slide along with its inner content.

We want to add animations to the inner content. Like when a slide appears, its inner content or text will also appear with a transition. In order to do that we will need another JS library or jQuery plugin called 'Slick Animation', and a CSS animation library called 'Animate CSS'.

I will link Animate CSS in header and I have downloaded 'slick animation' javascript file to link with project. We will have to link 'slick animation' with 'Slick Slider'. So add slickAnimation function at the end of Slick Slider initialization. Now configuration is done.

We will use 'Animate CSS' classes to animate elements. For example if we want to animate a heading. First of all add 'animate__animated' class to it. Animate CSS library has changed. Before this change, class name was different. Now add custom attribute with value to define animation type and style. e.g. data-animation-in and it's value can be 'animate__fadeInDown' that is a class from Animate CSS library. animate__fadeInDown is animate CSS class that will animate element from above to its original location and change opacity from 0 to 1.

Now heading is being animated inside slide. You can add any other class from Animate CSS to change animation style.

Here note one thing. While centering elements in a slide, in CSS, I applied position absolute to a wrapper div. Not to the heading or text that I want to animate. Do not position elements in slide that are to be animated. Apply outer div and position it to center or wherever you like it to be in slide. Use elements like heading and paragraph inside that and then animate these inner elements.

Reason is, 'slick animation' and 'Animate CSS' also transform or position elements. If you will apply position to these, original animation will get disturbed. So make sure you leave those elements alone that are going under actual animation. Now, we applied animation to a single element when slide comes into focus. There are other settings for this animation as well. You can define

- Entering animation and time it takes to complete that animation
- Animation on exit and time it takes for element to exit with animation

fadeIn was old class for the Animate CSS library. Now these classes have changed.

data-animation-in, data-delay-in, data-animation-out, data-delay-out and more attributes can enhance animation further. 3.5 seconds is chosen by us and it depends on our Slick Slider slide animation duration. Our slide stays for 5 seconds, so after a slide appears, its elements animate and then exit after 3.5 seconds that is before next slide appears.

Now apply same technique with other elements that are inside all slides. If you use arrows to move slides, animation will still work. After a slide comes into focus, its inner content will animate according to settings and before slide changes, content will undergo exit animation gracefully.

So this is how you can enhance slick slider and add cool animations based on animate CSS
to inner elements for slides in a slider. You are free to use any animation from animate CSS library and apply it to any element. Element can be heading, paragraph, button, image, div or anything.

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#WebStylePress #SlickSlider #CSSAnimations #WebDevelopment #CSSAnimation #SlickAnimation