slider

A modern, light weight content slider

BoxSlider is a small library with zero dependencies that provides a light-weight, responsive content slider with multiple slide transition effects for modern browsers.

The library can be used standalone or via React and web components. View the website for full details.

The core JavaScript library. Zero runtime dependencies. Provides factory functions and a BoxSlider class for attaching transition effects to any container element.

Install from NPM:

npm install --save @boxslider/slider

Use from CDN:

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

  createCarouselSlider('#slider')
</script>

Available effects: createCarouselSlider · createCubeSlider · createFadeSlider · createTileSlider

React 19 component wrappers. Provides typed props and event handlers for all slider effects plus a SliderControls component that adds navigation controls automatically.

Install via NPM:

npm install --save @boxslider/react

import { SliderControls, CarouselSlider } from '@boxslider/react'

function MySlider() {
  return (
    <SliderControls>
      <CarouselSlider>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
      </CarouselSlider>
    </SliderControls>
  )
}

View the React guide for full details.

Available components: CarouselSlider · CubeSlider · FadeSlider · TileSlider · SliderControls

Framework-agnostic web components. Works in any modern browser or JavaScript framework without additional configuration.

Install via NPM:

npm install --save @boxslider/components

Use from CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@boxslider/components/+esm"></script>

<bs-slider-controls>
  <bs-carousel>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </bs-carousel>
</bs-slider-controls>

View the web components guide for full details.

Available elements: <bs-carousel> · <bs-cube> · <bs-fade> · <bs-tile> · <bs-slider-controls>