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>

View prompt

I'm setting up the BoxSlider JavaScript library in my project.

Install: npm install --save @boxslider/slider
Or import from CDN: import { createFadeSlider } from 'https://cdn.jsdelivr.net/npm/@boxslider/slider/+esm'

Available helper functions (each takes a CSS selector or element + optional options):

- createCarouselSlider, createFadeSlider, createCubeSlider, createTileSlider

Options include: speed, timeout, autoScroll, pauseOnHover, loop, swipe, swipeTolerance

Key requirements:

- Create the HTML structure with a container and slide elements
- Set display, height, and width CSS on the slider container

Please provide a complete example with HTML, CSS, and JavaScript that creates a working carousel slider.

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`)
})