Mobile-compatible Image Slider Plugin – sliderjs

Preview:

Description:

sliderjs is a small, responsive image slider plugin that lets you create a mobile-compatible carousel on the cross-platform webpage. Supports asynchronous image loading for better performance.

Hover over the slider you will see controls which allow you to play/pause/go through the slider.

It auto collapses the pagination bullets into a dropdown select on small screen devices such as mobile and tablet.

How to use it:

Load the Font Awesome for the slider controls (OPTIONAL).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Load the necessary JavaScript and CSS files.

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

Add your own images to the slider using the ‘data-src-async’ attribute as follows:

<div id="slider" class="example">
  <div class="slide">
    <img src="" alt="" data-src-async="1.jpg">
  </div>
  <div class="slide">
    <img src="" alt="" data-src-async="2.jpg">
  </div>
  <div class="slide">
    <img src="" alt="" data-src-async="3.jpg">
  </div>
  ...
</div>

Set the max height/width of the slider.

.example {
  max-height: 400px; 
  width: 90%; 
  max-width: 960px;
}

Initialize the slider and uses Font Awesome for the icons.

var slider = new Slider("slider", {
    play_icon: '<i class="fas fa-play"></i>',
    pause_icon: '<i class="far fa-pause-circle"></i>',
    prev_icon: '<i class="fas fa-angle-left"></i>',
    next_icon: '<i class="fas fa-angle-right"></i>'
});

Default slider controls:

var slider = new Slider("slider", {
    pause: "<span>&#9654;</span>",
    play: "<span>&#9208;</span>",
    next: "<span>&gt</span>",
    prev: "<span>&lt</span>"
});