Touch-enabled Infinite Slider In Vanilla JavaScript

A standalone JavaScript library for creating a responsive, automatic, touch-enabled image carousel slider.

You can slide through the images with mouse drag or touch swipe.

How to use it:

Load the stylesheet ‘slider-js.css’ in the document that provides the basic styling for the slider. How to style the navigation & pagination controls is up to you.

<link rel="stylesheet" href="css/slider-js.css">

Load the main JavaScript ‘slider-js.js’ at the end of the document.

<script src="js/slider-js.js"></script>

Add images and slider controls to the webpage. Available HTML data attributes:

• data-width: width of slider
• data-idBegin: initial slide
• data-duration: duration of animation
• data-delay: transition delay

<div class="sliderjs" data-width="100%" data-idBegin="0" data-duration="400" data-delay="2000">
  <div class="sliderjs-viewport">
    <ul class="sliderjs-canvas">
      <li><img src="1.jpg" alt="Image Slider 1"></li>
      <li><img src="2.jpg" alt="Image Slider 2"></li>
      <li><img src="3.jpg" alt="Image Slider 3"></li>
      <li><img src="4.jpg" alt="Image Slider 4"></li>
      <li><img src="5.jpg" alt="Image Slider 5"></li>
    </ul>
  </div>
  <ul class="sliderjs-pag">
    <li>slide 1</li>
    <li>slide 2</li>
    <li>slide 3</li>
    <li>slide 4</li>
    <li>slide 5</li>
  </ul>
  <ul class="sliderjs-nav">
    <li class="sliderjs-prev">Previous</li>
    <li class="sliderjs-next">Next</li>
  </ul>
</div>

Apply your own styles to the navigation and pagination controls.