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.