Touch-enabled Image Carousel Slider In Pure JavaScript – ysSlider.js

ysSlider.js is an easy yet customizable JavaScript slider plugin to create responsive, touch-enabled image carousels/slideshows with optional CSS3 transitions.

How to use it:

1. Load the ysSlider.js plugin’s files in the document.

<link rel="stylesheet" href="dist/css/ysslider.css" />
<script src="dist/js/ysslider.js"></script>

2. Add images together with next/prev controls into the slider wrapper.

<div class="ysslider">
  <div class="item"><img src="https://source.unsplash.com/CKFgnLGpWqc/600x450" /></div>
  <div class="item"><img src="https://source.unsplash.com/7Of7_zOhyyA/600x450" /></div>
  <div class="item"><img src="https://source.unsplash.com/Ah09BJMwFWs/600x450" /></div>
  <div class="item"><img src="https://source.unsplash.com/pGwXiFyB7JE/600x450" /></div>
  <div class="controlbar">
    <a href="javascript:void(0);" class="prev">Prev</a>
    <a href="javascript:void(0);" class="next">Next</a>
  </div>
</div>

3. Apply an Animate.css based transition effect to the slide as follows:

<link rel="stylesheet" href="/path/to/cdn/animate.min.css">

<div class="ysslider">
  <div class="item"><img src="https://source.unsplash.com/CKFgnLGpWqc/600x450" /></div>
  <div class="item fadeIn"><img src="https://source.unsplash.com/7Of7_zOhyyA/600x450" /></div>
  <div class="item zoomIn"><img src="https://source.unsplash.com/Ah09BJMwFWs/600x450" /></div>
  <div class="item"><img src="https://source.unsplash.com/pGwXiFyB7JE/600x450" /></div>
  <div class="controlbar">
    <a href="javascript:void(0);" class="prev">Prev</a>
    <a href="javascript:void(0);" class="next">Next</a>
  </div>
</div>

4. Initialize the slider and enable the animation.

var mySlider = new ysSlider({
    animate: true
});

5. Enable the prev/next controls.

document.querySelector(".prev").onclick = function () {
  mySlider.prev();
}
document.querySelector(".next").onclick = function () {
  mySlider.next();
}

6. Enable/disable the autoplay functionality.

var mySlider = new ysSlider({
    auto: true,
    pause: 2000
});

7. Enable/disable the next/prev controls.

var mySlider = new ysSlider({
    controls: true,
    controlBar: '.controlbar
});

8. Enable/disable touch interactions. Default: false.

var mySlider = new ysSlider({
    touch: true
});

9. Default selectors.

var mySlider = new ysSlider({
    wrapper: '.ysslider',
    itemClass: '.item'
});

10. More API methods.

// destroy the slider instance
mySlider.destroy();
// return the total number of slides in the slider
mySlider.getSlideCount();
// return the current slide index in the slider.
mySlider.getCurrentSlide();

Changelog:

02/27/2023

• v1.0.0