Responsive Background Slider With Infinite Loop - jQuery Loop

An Infinite Scrolling, Full-Width Slider. Built with jQuery.

** Work in Progress **

Installation

Grab the CSS & JS files from this repository:

<link rel="stylesheet" href="/path/to/loopslider.min.css"> <script src="/path/to/loopslider.js"></script>

Basic example

Add the HTML snippet. Each image you wish to include is added as another <li> element.

<div id="loop-slider" data-autoplay="true" data-speed="8000">     <ul id="img-group">         <li class="slide" data-img="/path/to/image.jpg"></li>         <li class="slide" data-img="/path/to/image.jpg"></li>         <li class="slide" data-img="/path/to/image.jpg"></li>     </ul> </div>

Demo →

This example has autoplay enabled, with a time of 8 seconds.

Options

Autoplay

You can set the autoplay to be True or False, with False being the default.

data-autoplay="true"

Speed

If autoplay is enabled, you can customise the rate at which the images change. The value is in milliseconds, with 8000 (8 seconds) being the default.

data-speed="8000"