Cool 3D Slider/Carousel In JavaScript - Boxslider

Boxslider (formerly called jQuery Adaptor) is a pretty cool 2D/3D content slider/carousel JavaScript library that can be used to showcase your content with more than 6 pretty cool transition effects:

• Fade
• 3D Cube (horizontal & vertical)
• Tile (fade & flip)
• Carousel (horizontal scrolling)

You may also like:

• Book Showcase with 3D Transform Effects
• Flexible 3D Flipping Cube Pluigin - HexaFlip
• 3D Triple Panel Image Slider Plugin with jQuery
• Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster
• 3D Image Transitions Animations
• Content Flip Plugin - BookBlock

How to use it:

1. Install & import the Boxslider into your project.

# Vanilla JS
npm install --save @boxslider/slider
<script type="module">
  import {
    BoxSlider,
    FadeSlider,
    CubeSlider,
    CarouselSlider,
    TileSlider,
  } from 'https://cdn.jsdelivr.net/npm/@boxslider/slider/+esm'
</script>

# Web Component
npm install --save @boxslider/components
<script type="module" src="https://cdn.jsdelivr.net/npm/@boxslider/components/+esm"></script>
<bs-fade>
  <!-- Slides -->
</bs-fade>
<bs-cube>
  <!-- Slides -->
</bs-cube>
<bs-tile>
  <!-- Slides -->
</bs-tile>
<bs-carousel>
  <!-- Slides -->
</bs-carousel>

2. Add slides to the Boxslider container.

<section class="slider-viewport" aria-roledescription="carousel">
  <div class="slider" id="example">
    <figure class="slide">
      <picture>
        <img src="1.jpg" alt="Alt 1" />
      </picture>
    </figure>
    <figure class="slide">
      <img src="2.jpg" alt="Alt 2" />
    </figure>
    <figure class="slide">
      <img src="3.jpg" alt="Alt 3" />
    </figure>
  </div>
</section>

3. Initialize the Boxslider and done.

// Fade Slider
const fadeSlider = new BoxSlider(
  document.getElementById('example'),
  new FadeSlider(),
  {
    // options here
  },
)

// Cube Slider
const cubeSlider = new BoxSlider(
  document.getElementById('example'),
  new CubeSlider(),
  {
    // options here
  },
)

// Tile Slider
const tileSlider = new BoxSlider(
  document.getElementById('example'),
  new TileSlider(),
  {
    // options here
  },
)

// Carousel Slider
const carouselSlider = new BoxSlider(
  document.getElementById('example'),
  new CarouselSlider(),
  {
    // options here
  },
)

4. Available Boxslider options.

{

  // global options
  autoScroll: true,
  loop: true,
  pauseOnHover: false,
  speed: 800,
  startIndex: 0,
  swipe: true,
  swipeTolerance: 30,
  timeout: 5000,

  // Fade Slider options
  timingFunction: 'ease-in',

  // Cube Slider options
  direction: 'horizontal', // or 'vertical'
  perspective: 1000,

  // Tile Slider options
  tileEffect: 'fade', // or 'flip'
  rows: 8,
  rowOffset: 50,

  // Carousel Slider options
  timingFunction: 'ease-in-out',
  cover: false,

},

5. API methods.

// goto slide 3
slider.skipTo(2).then(() => {
  // do something
})

// goto the next slide
slider.next().then(() => {
  // do something
})

// goto the prev slide
slider.prev().then(() => {
  // do something
})

// play
slider.play()

// pause
slider.pause()

// destroy the instance
slider.destroy()

// re-init the slider
slider.reset(options, effect)

7. Event handlers.

// before transition
slider.addEventListener('before', (data) => {
  // data: {
  //   currentIndex: number
  //   nextIndex: number
  //   speed: number
  // }
})

// after transition
slider.addEventListener('after', (data) => {
  // data: {
  //   currentIndex: number
  //   speed: number
  // }
})

// when playing
slider.addEventListener('play', (data) => {
  // data: {
  //   currentIndex: number
  //   speed: number
  // }
})

// when paused
slider.addEventListener('pause', (data) => {
  // data: {
  //   currentIndex: number
  //   speed: number
  // }
})

// when destroyed
slider.addEventListener('destroy', () => {
  // No event data
})

Changelog:

v2.12.1 (2024-12-30)

• Make element event listeners passive

v2.12.0 (2024-11-02)

• Use touch events for horizontal swipe detection
• Only default pause on hover setting if using fine pointer like a mouse

v2.11.4 (2024-09-16)

• Update transition queue to only honour the last transition request during an active transition

v2.11.3 (2024-09-03)

• Resolve issuw with tile flip effect in Safari

v2.11.2 (2024-09-01)

• fix flip tile transition in safari

v2.11.0/1 (2024-09-01)

• Core slider no longer throws error if initialized without slides and calling any transition method will not update the state or attempt to transition. Invalid calls to next or prev etc will return an immediately resolved promise.
• Handle aborted animation when slide content changes during transition

v2.10.0 (2024-09-01)

• Add init and reset events to core slider and update components when mutations to slides are observed

v2.9.0 (2024-08-30)

• Use web animations api for effect transitions

v2.8.3 (2024-08-25)

• Update tile transition so that original slide content is no obscured by the tile transition wrapper

v2.8.2 (2024-08-23)

• Pass slides as second option to effect destroy method

v2.8.1 (2024-08-18)

• Add loop option so slider rotation can be disabled

v2.7.0 (2024-08-09)

• Set default configuration value for autoScroll to false if user prefers reduced motion

v2.6.3 (2024-07-29)

• Fix ARIA attributes inline with WAI carousel pattern
• Only apply aria attributes if not already present

v2.6.2 (2024-07-27)

• Remove fixed dimensions from fade and tile slider

v2.6.1 (2024-07-22)

• Apply computed style before offset dimensions in effects and simplify the style caching with attribute

v2.6.0 (2024-07-17)

• Add play/pause button to slider controls and create SliderControls component in react package

v2.5.3 (2024-07-10)

• Renamed to Boxslider
• Dropped jQuery dependency
• Bugfixed
• Updated doc
• Updated demo

2019-12-11

• JS updated
• Doc updated

2016-02-07

• Show slide in reverse for previous index. 

2014-11-04

• Fix styling and start code refactor

2014-10-17

• Fix styling and start code refactor
• Make fade responsive

---

This awesome jQuery plugin is developed by p-m-p. For more Advanced Usages, please check the demo page or visit the official website.