Adding Animation to your Hero Slider


In Part III of our Slick Slider Series, we will show you how to add animation to your Hero Slider using animate.css by Daniel Eden.

Adding Animation to your Hero Slider

In Part III of our Slick Slider Series, we will show you how to add animation to your Hero Slider using animate.css by Daniel Eden. CSS has become more powerful than ever and the plugins that have been created as a result enable you to add interactivity to your website like never before. This article will show you how to add animation to your Hero Slider using animate.css

If you missed Part I of our Slick Slider Series on adding a hero slider to your website you can find it here.

Below is the HTML, CSS and JavaScript required to animate your hero slides.

Step 1 - Add the HTML below to where you'd like your animated hero slider to populate

Step 2 - Add the CSS below to the main stylesheet of your website

Step 3 - Add the JavaScript below to the page where your hero slider will live

Step 4 - Add the includes below to the page where your hero slider will live

Author

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.