JavaScript

More advanced users may want to use the core JavaScript library directly. The core library provides a simple API for creating a slider and manipulating it programmatically. For ready to use components view the React and Web Components guides.

Installation

The package can be imported as an NPM module or used from a CDN.

Install via NPM.

npm install --save @boxslider/slider

Alternatively use from CDN.

<script type="module">
  import { createFadeSlider } from 'https://cdn.jsdelivr.net/npm/@boxslider/slider/+esm'

  createFadeSlider('#slider', { speed: 300 })
</script>

Usage

Create the HTML structure for your slider content.

<section id="slider">
  <div class="slide">Slide one</div>
  <div class="slide">Slide two</div>
  <div class="slide">Slide three</div>
</section>

Create a new BoxSlider instance with the desired settings and effect. To do this either use the create slider helper functions or create a new BoxSlider instance directly.

The helper functions are a convenient way to create a new slider with either a reference to the slider element or a CSS selector.

import {
  createCarouselSlider,
  createCubeSlider,
  createFadeSlider,
  createTileSlider,
  BoxSlider,
  FadeSlider,
} from '@boxslider/slider'

// Options for the slider
const options = {
  autoScroll: true,
  timeout: 5000,
}

// Create a slider with the carousel slide transition using the helper function
const slider = createCarouselSlider('#slider', options)
// or
const cubeSlider = createCubeSlider('#slider', options)
// or
const fadeSlider = createFadeSlider('#slider', options)
// or
const tileSlider = createTileSlider('#slider', options)

// Call API methods on the slider to control it
await slider.next()

// Alternatively, create a slider with the fade slide transition from the Slider
// and effect directly.
const fadeSlider = new BoxSlider(
  document.getElementById('slider'),
  new FadeSlider(),
  options,
)

Use the API methods to control the slider. View the available configuration options and the API reference for more details.

Styling

For the effects to work correctly the slider and slide elements must be styled with a height and width and the slide elements should have an equal height within the slider element.

#slider {
  height: 400px;
  width: 800px;
}

.slide {
  height: 100%;
  width: 100%;
}

Events

Slider events can be listened for by adding event handlers to the BoxSlider instance.

// Add an event listener to the BoxSlider instance
slider.addEventListener('after', (ev) => {
  console.log(`Slide ${ev.currentIndex} is now active`)
})