The Titan slider is lightweight and has an easy-to-use HTML structure, as follows:
<div class="titanSlider"> <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.
Select the slider by it's ID or class, and call the titanSlider() function on the very bottom of the page, right before the closing body tag.
$('#home-slider').titanSlider();
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>
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.