Cool 3D Slider/Carousel In JavaScript – Boxslider

Boxslider (previously referred to as jQuery Adaptor) is a fairly cool 2D/3D content material slider/carousel JavaScript library that can be utilized to showcase your content material with greater than 6 fairly cool transition results:

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

You may additionally like:

use it:

1. Set up & import the Boxslider into your undertaking.

# Vanilla JS
npm set up --save @boxslider/slider
<script kind="module">
  import {
    FieldSlider,
    FadeSlider,
    CubeSlider,
    CarouselSlider,
    TileSlider,
  } from 'https://cdn.jsdelivr.web/npm/@boxslider/slider/+esm'
</script>

# Net Part
npm set up --save @boxslider/parts
<script kind="module" src="https://cdn.jsdelivr.web/npm/@boxslider/parts/+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.

<part class="slider-viewport" aria-roledescription="carousel">
  <div class="slider" id="instance">
    <determine class="slide">
      <image>
        <img src="1.jpg" alt="Alt 1" />
      </image>
    </determine>
    <determine class="slide">
      <img src="2.jpg" alt="Alt 2" />
    </determine>
    <determine class="slide">
      <img src="3.jpg" alt="Alt 3" />
    </determine>
  </div>
</part>

3. Initialize the Boxslider and carried out.

// Fade Slider
const fadeSlider = new BoxSlider(
  doc.getElementById('instance'),
  new FadeSlider(),
  {
    // choices right here
  },
)

// Dice Slider
const cubeSlider = new BoxSlider(
  doc.getElementById('instance'),
  new CubeSlider(),
  {
    // choices right here
  },
)

// Tile Slider
const tileSlider = new BoxSlider(
  doc.getElementById('instance'),
  new TileSlider(),
  {
    // choices right here
  },
)

// Carousel Slider
const carouselSlider = new BoxSlider(
  doc.getElementById('instance'),
  new CarouselSlider(),
  {
    // choices right here
  },
)

4. Out there Boxslider choices.

{

  // world choices
  autoScroll: true,
  pauseOnHover: false,
  velocity: 800,
  startIndex: 0,
  swipe: true,
  swipeTolerance: 30,
  timeout: 5000,

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

  // Dice Slider choices
  route: 'horizontal', // or 'vertical'
  perspective: 1000,

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

  // Carousel Slider choices
  timingFunction: 'ease-in-out',
  cowl: false,

},

5. API strategies.

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

// goto the subsequent slide
slider.subsequent().then(() => {
  // do one thing
})

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

// play
slider.play()

// pause
slider.pause()

// destroy the occasion
slider.destroy()

// re-init the slider
slider.reset(choices, impact)

7. Occasion handlers.

// earlier than transition
slider.addEventListener('earlier than', (information) => {
  // information: {
  //   currentIndex: quantity
  //   nextIndex: quantity
  //   velocity: quantity
  // }
})

// after transition
slider.addEventListener('after', (information) => {
  // information: {
  //   currentIndex: quantity
  //   velocity: quantity
  // }
})

// when taking part in
slider.addEventListener('play', (information) => {
  // information: {
  //   currentIndex: quantity
  //   velocity: quantity
  // }
})

// when paused
slider.addEventListener('pause', (information) => {
  // information: {
  //   currentIndex: quantity
  //   velocity: quantity
  // }
})

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

Changelog:

v2.6.6 (2024-08-09)

• Set default configuration worth for autoScroll to false if person prefers decreased movement

v2.6.3 (2024-07-29)

• Repair ARIA attributes inline with WAI carousel sample
• Solely apply aria attributes if not already current

v2.6.2 (2024-07-27)

• Take away fastened dimensions from fade and tile slider

v2.6.1 (2024-07-22)

• Apply computed type earlier than offset dimensions in results and simplify the type caching with attribute

v2.6.0 (2024-07-17)

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

v2.5.3 (2024-07-10)

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

2019-12-11

2016-02-07

• Present slide in reverse for earlier index. 

2014-11-04

• Repair styling and begin code refactor

2014-10-17

• Repair styling and begin code refactor
• Make fade responsive

This superior jQuery plugin is developed by p-m-p. For extra Superior Usages, please test the demo web page or go to the official web site.