slider

slider copied to clipboard

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.

Installation

Install from NPM

npm install --save @boxslider/slider

Use from CDN

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

  const slider = new BoxSlider(
    document.getElementById('slider'),
    new FadeSlider(),
  )
</script>

React

Install via NPM

npm install --save @boxslider/react

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

function MySlider({ children }) {
  return (
    <SliderControls>
      <CarouselSlider>{children}</CarouselSlider>
    </SliderControls>
  )
}

View the React guide for full details

Web Components

Install via NPM

npm install --save @boxslider/components

Use from CDN

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

<bx-slider-controls>
  <bs-carousel>
    <!-- Slides -->
  </bs-carousel>
</bx-slider-controls

View the web components guide for full details.