Touch-enabled Image Carousel Library In Pure JavaScript – Deslider

Category: Javascript , Slider | February 26, 2017
Author: kevguy
Views Total: 1,879
Official Page: Go to website
Last Update: February 26, 2017
License: MIT

Preview:

Touch-enabled Image Carousel Library In Pure JavaScript – Deslider

Description:

Deslider is a lightweight, dynamic carousel JS plugin that generates a responsive, mobile-friendly, endless-looping slider from an image object. Supports both mouse drag and touch swipe events (based on hammer.js).

How to use it:

Import the Deslider’s JavaScript and Stylesheet into the webpage.

<link href="css/style.css" rel="stylesheet">
<script src="src/Deslider.min.js"></script>

Create an empty container in which you want to place the carousel.

<div id="demo">
</div>

Create a data object containing images you want to present.

var imgList = [
    "1.jpg",
    "2.jpg",
    "3.jpg"
];

Create a new object and specify the image sources & target container.

new Deslider(imgList, '#demo');

Possible carousel options:

slideshow = new Deslider(imgObj, '#demo',{

  // auto play
  auto: {
    speed: 3000,
    pauseOnHover: true,
  },

  // shows a fullscreen mode button
  fullScreen: true,

  // enables touch swipe
  swipe: true,

  // enables pagination
  pagination: true,

  // enables infinite loop
  repeat: true

});

You Might Be Interested In:


One thought on “Touch-enabled Image Carousel Library In Pure JavaScript – Deslider

  1. Ibrahim Samad

    Not working. I can see only the image slider holders actually sliding, but the image are not in. My images are in the same folder as my js, css and html. I defined my image list as var imgList = [“1.jpg”, “2.jpg”, “3.jpg”]; And that is actually the same names given to those images.

    Reply

Leave a Reply