Skip to main content

Introduction

BoxSlider is a small library with no third party dependencies that provides a light-weight, responsive content carousel (slider) with various slide transition effects for modern browsers. The core JavaScript library can be used standalone and there are React component implementations for each slide effect. Web components are also available for each slide effect meaning the library can be used with most front-end frameworks including Angular, Svelte and Vue.js.

Face of a hyena looking slightly to the left with the sun and pyramids in the background
Front view of an elephant with patterns on it's skin walking forwards with the suns rays and palm trees in the background
Face of a lion looking slightly to the right with a wavey pattern mane and plant leafs in the background
Face of a ram with horns and large ears with hair that creates a pattern of swirls in the background

Slide effects​

The following slide effects are available:

  • Carousel - A traditional slide effect that animates slides horizontally.
  • Cube - A 3D cube effect that rotates slides horizontally or vertically.
  • Fade - A fade effect that fades slides in and out of view.
  • Tile - A tile effect that flips in 3d or fades slides in a grid pattern.

Don't like the built-in effects? It's super easy to create a custom effect.

Key features​

  • Performance: BoxSlider is a small library with no third party dependencies that will help keep bundle sizes small.
  • Accessibility: BoxSlider is accessible and follows the WAI-ARIA carousel pattern guidelines.
  • Customizable: BoxSlider is configurable through a simple set of options and can be styled to your needs.
  • Responsive: BoxSlider adapts to changes in screen size and orientation.
  • Modern: BoxSlider utilises modern web technologies with CSS animations for smooth performance.

Should I use BoxSlider?​

The carousel pattern gets a bit of a bad rap for being overused and often misused. Carousels still have a place in modern web design when used correctly and BoxSlider can be a good choice for projects that need a simple solution that can be applied with best practices.