Responsive Background Slider With Infinite Loop - jQuery Loop

Loop is a fully responsive, full-width background slider/carousel plugin with support for autoplay, infinite loop, keyboard interactions, and more.

Dead simple to use and works with HTML unordered list and background images. Smooth slide transition effects are based on CSS3 2D transforms.

How to use it:

1. Import the stylesheet loopslider.min.css and JavaScript loopslider.min.js into the document.

<link rel="stylesheet" href="css/loopslider.min.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/loopslider.min.js"></script>

2. The basic markup. You can customize the plugin using the following attributes:

• "data-autoplay": Turns on the autoplay. Leave blank or set to "false" to disable. Default is off.
• "data-speed": sets the speed for the autoplay in milliseconds. Can be omitted if no autoplay. Default is 8 seconds.
• "data-img": Sets the path to the background image.

<div class="container">
  <div id="loop-slider" 
       data-autoplay="true" 
       data-speed="8000">
    <ul id="img-group">
      <li class="slide" data-img="https://source.unsplash.com/1600x900/?girl"></li>
      <li class="slide" data-img="https://source.unsplash.com/1600x900/?fitness"></li>
      <li class="slide" data-img="https://source.unsplash.com/1600x900/?yoga"></li>
      <li class="slide" data-img="https://source.unsplash.com/1600x900/?gym"></li>
      <li class="slide" data-img="https://source.unsplash.com/1600x900/?water"></li>
    </ul>
  </div>
</div>

---

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