Initialize Slider

To initialize the slider, you need to instantiate the BlazeSlider constructor with the first argument as the div.blaze-slider element in DOM you want to initialize the slider on and optional configuration as the second argument

new BlazeSlider(el, config?)

If you don't provide any configuration, blaze-slider with use the default configuration

Example

Let's take an example to see what happens when we initialize a slider without any configuration

<div class="blaze-slider">
  <div class="blaze-container">
    <div class="blaze-track-container">
      <div class="blaze-track">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
  </div>
</div>

const el = document.querySelector('.blaze-slider')
new BlazeSlider(el)

1

2

3

4

note

The styles you see on the above slider are NOT the default style provided by blaze-slider from blaze.css

blaze.css does not come with any "theme", it only contains just enough styles to make the slider work, so you don't have to override the default styles

Adding Navigation and Pagination Buttons

As discussed earlier, we can add the navigation buttons and pagination anywhere in the standard structure, (except blaze-track)

Let's create a custom structure and put the nav buttons and pagination inside it and initialize the slider

<div class="blaze-slider">
  <div class="blaze-container">
    <div class="blaze-track-container">
      <div class="blaze-track">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
    <!-- putting nav buttons and pagination in a custom structure -->
    <div class="my-structure">
      <button class="blaze-prev" aria-label="Go to previous slide"></button>
      <div class="blaze-pagination"></div>
      <button class="blaze-next" aria-label="Go to next slide"></button>
    </div>
  </div>
</div>

const el = document.querySelector('.blaze-slider')
new BlazeSlider(el)

1

2

3

4

initialize Multiple Sliders

Note that the examples above only show initializing only one slider, but if you have more than 1 sliders on the page, you will need to initialize all of them, as shown below:

document.querySelectorAll('.blaze-slider').forEach(el => {
  new BlazeSlider(el, options?)
})

You can also initialize the slider lazily when it is about to come into the viewport using IntersectionObserver. This is a pretty common optimization for sliders. Though it is not worth doing such kind of optimization for blaze-slider because blaze-slider initializes the slider extremely fast and unless you have a ton of sliders on the page, it should be fine to initialize all the sliders on the page during page load.