Skip to content

p-m-p/slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7263294 · Aug 14, 2024
Aug 14, 2024
Aug 7, 2024
Jul 18, 2024
Mar 4, 2023
Aug 14, 2024
Jul 18, 2024
Sep 28, 2022
Jan 13, 2024
Jul 7, 2024
Dec 30, 2023
Aug 7, 2024
Apr 6, 2024
Jul 24, 2022
Aug 9, 2024
Aug 9, 2024
Aug 9, 2024
Aug 13, 2024
Jan 5, 2023
May 4, 2024
Mar 31, 2024
Feb 10, 2024
Apr 13, 2024
Apr 13, 2024

Repository files navigation

Box Slider

A modern, light weight content slider

NPM Status Build Status Published on webcomponents.org

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.