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

Category: Javascript , Recommended , Slider | March 16, 2017
Views Total:1,306 views
Official Page:Go to website
Last Update:March 16, 2017


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


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 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 data-crystal-title="Slide description 2">
    <img src="2.jpg" alt="">
  <div data-crystal-title="Slide description 3">
    <img src="3.jpg" alt="">
  <div data-crystal-title="Slide description 4">
    <img src="4.jpg" alt="">

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
// slides to the next image
// slides to a specified image
// returns true if the option is enable 
// destroy the slider
// re-init the slider

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 () {},

You Might Be Interested In:

Leave a Reply