Skip to Content

Add Text Transitions to Your Hero Sliders

Spice up your hero carousel sliders by adding text transitions.

Hero sliders are some of the most interesting visual elements in website design. They give brands the ability to showcase unique visual elements. While a picture might be worth a thousand words, far fewer words are still needed on copy to bring those visual elements to life in the context of an organization's website. 

Text on hero images are like butter on bread -- or the other way around depending on which one takes priority for your marketing strategy. And while the images often take center stage for hero banners, text and text effects can add a bit more to a seemingly static hero image (or sets of images). 

Here's how to add fun, distinctive text transitions to your hero sliders: 


The HTML here specifies the slider container and then four divs for each of the sliders upon initialization.


The CSS allows for a great slider experience throughout all responsive breakpoints, as well as the transition you wish to include. Note the slick-generated '.slick-active' class, which we use to start/stop the animations.


The JS here calls Slick Slider on the containing div, and some custom options from their documentation.

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Don't forget to adjust the browser window at a variety of sizes to see exactly how the website responds in mobile format!

Scott Madara
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.