Image Slider Carousel With Responsive Scaling - jquery.slider.js

A simple, lightweight, responsive, infinitely looping image slider carousel that works with the native img tag. The carousel enables the user to loop infinitely over items by clicking next/previous buttons or pagination bullets.

How to use it:

1. Include jQuery library and the jquery.slider.js plugin on the page.

<link rel="stylesheet" href="css/slider.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="js/jquery.slider.js"></script>

2. Include the latest Font Awesome for the navigation buttons (OPTIONAL).

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

3. I highly recommend that you use imagesLoaded plugin to detect if all slide images have been loaded.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.js"></script>

4. Create the HTML for the slider carousel.

<div id="slider">

  <!-- Slides -->
  <div class="slide">
    <img src="https://source.unsplash.com/900x675/?fitness">
    <div class="caption">Caption Text One</div>
  </div>

  <div class="slide">
    <img src="https://source.unsplash.com/900x675/?bikini">
    <div class="caption">Caption Text Two</div>
  </div>

  <div class="slide">
    <img src="https://source.unsplash.com/900x675/?girl">
    <div class="caption">Caption Text Three</div>
  </div>

  <!-- Navigation -->
  <a class="prev"><i class="fas fa-chevron-left"></i></a>
  <a class="next"><i class="fas fa-chevron-right"></i></a>

  <!-- Pagination -->
  <div class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

</div>

4. Initialize the slider carousel after all the slides images are completely loaded.

$(document).imagesLoaded( function() {

  $("#slider").slider();

});

---

This awesome jQuery plugin is developed by karolinaklein. For more Advanced Usages, please check the demo page or visit the official website.