Skip to Content

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.

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


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

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.