Highly Customizable Image Slider In Vanilla JavaScript – NdotSlider

Preview:

Description:

NdotSlider is a standalone vanilla JavaScript library for creating a responsive, automatic image slider with highly customizable slider controls and transition effects.

Basic usage:

Download and insert the latest version of the NdotSlider library in the document.

<script src="ndot_slider_VERSION.min.js"></script>

Insert a group of images to the slider container as this:

<div class="ndot-slider">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>

Initialize the NdotSlider and you’re done.

NdotSlider.start();

To config the slider, just pass the parameters as an object to the ‘data-ndotslider’ attribute:

• color: “orange” – the theme color for the slider
• size: “contain” – Image sizes. [cover | contain | strech]
• autoPlay: false – Automaticaly play the slides. [true | false]
• autoPlayButton: false – Build Play/Pause button. [true | flase]
• duration: 5000 – With autoPlay ON the time in milliseconds until the next slide.
• loop: false – Allow looping on the last and first slide.
• preview: true – Build Preview. [true | flase]
• previewSpan: true – Preview look. [false = thumbnails | true = spans ]
• previewButton: false – Build Show Preview/Hide Preview button. [true | flase]
• buttons: true – Build Next/Previous buttons. [true | flase]
• animation: “slide” – The name of the animation to use. [slide | slideBottom | fade]
• fullscreenButton: false – Build Fullscreen button. [true | flase]
• animationDuration: 600 – The animation duration in milliseconds. 0 < value < 15000. If these condition is not met it will fallback to the default value.
• animationTiming: [0.5, 0, 0, 1] – Your timing function for the animations. [Ax, Ay, Bx, By], 0 <= Ax,Bx <= 1. If any of these condition are not met it will fallback to the default values. Do not use numbers like .24 JSON does not like that, insted use 0.24.

<div class="ndot-slider" 
     data-ndotslider='{
      "previewSpan": true,
      "previewButton": true,
      "fullscreenButton": true,
      "autoPlayButton": true,
      "duration": 2000,
      "size": "contain",
      "animationDuration": 600,
      "animationTiming": [0.4, -0.4, 0.6, 1],
      "animation": "slide"
      }'>
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>