Tutorial
Setup
Required HTML markup for Blaze Slider
See Installation to add Blaze Slider's JS and CSS to your project.
Required HTML Structure
Blaze Slider requires a specific markup structure:
<div class="blaze-slider">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track">
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</div>
</div>
</div>
</div>The structure follows this pattern:
.blaze-slider > .blaze-container > .blaze-track-container > .blaze-trackThe .blaze-track element must only contain slides. No other elements are
allowed inside it.
Adding Navigation and Pagination
Add navigation buttons with the classes blaze-prev and blaze-next.
Add a pagination container with the class blaze-pagination. Blaze Slider will automatically create pagination buttons inside this element.
These elements can be placed anywhere inside .blaze-slider, except inside .blaze-track.
Basic Example
<div class="blaze-slider">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track">
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</div>
</div>
<button class="blaze-prev">previous</button>
<button class="blaze-next">next</button>
<div class="blaze-pagination"></div>
</div>
</div>Custom Structure Example
Navigation and pagination can be wrapped in custom containers:
<div class="blaze-slider">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track">
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</div>
<div class="pagination-wrapper">
<div class="blaze-pagination"></div>
</div>
</div>
<div class="nav-wrapper">
<button class="blaze-prev">previous</button>
<button class="blaze-next">next</button>
</div>
</div>
</div>