High-performance Slider Carousel JavaScript Library – Blaze Slider

Preview:

Description:

Blaze Slider is a JavaScript library for creating responsive, customizable, draggable, swipeable, high-performance, and SEO-friendly sliders & carousels on modern web applications.

It’s built with performance in mind and works without any third-party frameworks or libraries. It is also mobile-friendly and has been optimized to fix CLS and reduce the load time on your site.

How to use it:

1. Install and import the Blaze Slider.

# NPM
$ npm i blaze-slider

// ES Module
import BlazeSlider from 'blaze-slider'
import 'blaze-slider/dist/blaze.css'

// Browser
<link rel="stylesheet" href="https://unpkg.com/blaze-slider@latest/dist/blaze.css" />
<script src="https://unpkg.com/blaze-slider@latest/dist/blaze-slider.min.js"></script>

2. Add slides together with OPTIONAL pagination and navigation controls to the carousel.

<div class="blaze-slider">
  <div class="blaze-container">
    <!-- Slides -->
    <div class="blaze-track-container">
      <div class="blaze-track">
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        ... more slides here
      </div>
    </div>
    <!-- Navigation -->
    <button class="blaze-prev">previous</button>
    <button class="blaze-next">next</button>
    <!-- Pagination -->
    <div class="pagination"></div>
  </div>
</div>

3. Initialize the Blaze Slider to generate a basic carousel.

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

4. Available options to customize the carousel.

new BlazeSlider(el,{
    all: {
      // layout
      slideGap: '20px',
      slidesToScroll: 1,
      slidesToShow: 1,
      // behavior
      loop: true,
      // autoplay
      enableAutoplay: false,
      stopAutoplayOnInteraction: true,
      autoplayInterval: 3000,
      autoplayDirection: 'to left',
      // pagination
      enablePagination: true,
      // transition
      transitionDuration: 300,
      transitionTimingFunction: 'ease',
      draggable: true,
    },
    '(min-width: 768px)': {
      // see above
    },
    '(min-width: 1024px)': {
      // see above
    },
    // more responsive options here
})