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

2024-04-08

• Renamed to Boxslider
• Dropped jQuery dependency
• 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.