00%
images loaded

Titan Slider

HTML Structure

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.

Calling the slider function

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();

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 up: Contact form