An Infinite Scrolling, Full-Width Slider. Built with jQuery.
** Work in Progress **
Grab the CSS & JS files from this repository:
<link rel="stylesheet" href="/path/to/loopslider.min.css">
<script src="/path/to/loopslider.js"></script>
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>
This example has autoplay enabled, with a time of 8 seconds.
You can set the autoplay to be True
or False
, with False
being the default.
data-autoplay="true"
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"