Framework Integration

Blaze Slider is framework agnostic. It just needs a DOM element and an optional config object.

Every framework provides a way to access the underlying DOM element:

React: Ref API
Vue: Template Refs
Svelte: bind:this
Solid: ref

Use these APIs to get the element reference, then initialize with new BlazeSlider(element, config).

Don't initialize BlazeSlider on the same element more than once.

Example

React

useBlazeSlider.js

import { useRef, useEffect } from 'react';
import BlazeSlider from 'blaze-slider';
import 'blaze-slider/dist/blaze.css';

export function useBlazeSlider(config) {
  const sliderRef = useRef(null);
  const elRef = useRef(null);

  useEffect(() => {
    if (!sliderRef.current && elRef.current) {
      sliderRef.current = new BlazeSlider(elRef.current, config);
    }
  }, []);

  return elRef;
}

App.jsx

import { useBlazeSlider } from './useBlazeSlider';

function App() {
  const ref = useBlazeSlider({
    all: { slidesToShow: 3 },
  });

  return (
    <div className="blaze-slider" ref={ref}>
      <div className="blaze-container">
        <div className="blaze-track-container">
          <div className="blaze-track">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Example

React

On this page