Mobile-friendly Image Carousel In Vanilla JavaScript – CrystalSlider.js

Preview:

Description:

CrystalSlider.js an independent vanilla JavaScript plugin that lets you create a responsive, drag/touch-enabled and user-friendly image slider/carousel for your web applications.

Install the CrystalSlider via NPM:

# NPM
$ npm install CrystalSlider

How to use it:

Insert the Crystal Slider’s JavaScript and CSS files into the webpage.

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

Insert your images together with the descriptions into the carousel.

<div class="crystal-slider">
  <div data-crystal-title="Slide description">
    <img src="1.jpg" alt="">
  </div>
  <div data-crystal-title="Slide description 2">
    <img src="2.jpg" alt="">
  </div>
  <div data-crystal-title="Slide description 3">
    <img src="3.jpg" alt="">
  </div>
  <div data-crystal-title="Slide description 4">
    <img src="4.jpg" alt="">
  </div>
</div>

Initialize the carousel by creating a new CrystalSlider object as this:

const crystalSlider = new CrystalSlider();

API methods:

const crystalSlider = new CrystalSlider();
// slides to the previous image
crystalSlider.prevSlide()
// slides to the next image
crystalSlider.nextSlide() 
// slides to a specified image
crystalSlider.goToSlide(index)
// returns true if the option is enable 
crystalSlider.isEnabledOption(option) 
// destroy the slider
crystalSlider.destroy() 
// re-init the slider
crystalSlider.reinit(options)

Default options to customize the carousel.

const crystalSlider = new CrystalSlider({
      selector       : `.${sliderCls}`,
      activeSlide    : 1,
      loop           : true,
      fade           : false,
      duration       : 500,
      draggable      : true,
      adaptiveHeight : false,
      threshold      : 30,
      titles         : false,
      keyboard       : false,
      easing         : 'ease-out',
      // Nav
      nav            : true,
      navPrevVal     : 'Prev',
      navNextVal     : 'Next',
      // Pagination
      pagination     : false,
      thumbnails     : false,
      zIndex         : 98,
      // Callbacks
      onReady        : function () {},
      beforeChange   : function () {},
      afterChange    : function () {},
});