Touch-enabled Image Carousel Library In Pure JavaScript – Deslider

Category: Javascript , Slider | February 26, 2017
Views Total:1,142 views
Official Page:Go to website
Last Update:February 26, 2017


Touch-enabled Image Carousel Library In Pure JavaScript – Deslider


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">

Create a data object containing images you want to present.

var imgList = [

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.


Leave a Reply