Titan Slider
HTML Structure
The Titan slider is lightweight and has an easy-to-use HTML structure, as follows:
<div class="slider"> <ul class="slides"> <li class="slide"> // Content slide 1 </li> <li class="slide"> // Content slide 2 </li> </ul> <div>
Knowing this, you can add as many slides as you want.
Slide background
The slide background is actually a div object that owns a style property with the corresponding background image url. Just like this:
// Inside .slide > section.hero <div class="bg" style="background-image:url(url-to-image)"></div>
Dark mode for dark backgrounds
For light on dark slides, Be has a special class you can add. Add the ".dark" class to the <li class="slide"> element inside the slider to change the colors of the text and header to white when the active slide has this class.
Next upCheat sheet