p-m-p/slider: A modern, light weight content slider

A modern, light weight content slider

About

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.

Packages

@boxslider/slider

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

@boxslider/react

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

@boxslider/components

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: · · · ·