Highly Customizable Image Slider In Vanilla JavaScript – NdotSlider

Category: Javascript , Slider | May 20, 2017
Author: Ndot
Views Total: 406 views
Official Page: Go to website
Last Update: May 20, 2017
License: MIT

Preview:

Highly Customizable Image Slider In Vanilla JavaScript – NdotSlider

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>

You Might Be Interested In:


Leave a Reply