Touch-enabled Image Carousel Library In Pure JavaScript – Deslider

Preview:

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
});