InfiniteSlideScroller is a lightweight infinite slider where your slides are scrolling without stopping.
You can make awesome pictures presentations with a tiny amount of code. You just need jQuery and the InfiniteSlideScroller js and css minified files.
Import the two minified files into your pages.
<script src="./path/to/InfiniteSlideScroller.js"></script>
<link rel="stylesheet" href="./path/to/InfiniteSlideScroller.min.css">
Use a simple list, each li are a slide, you can put any type of content inside.
<ul id="scroller">
<li><a href="#"><img src="./demo/SKI2016-13-small.jpg"></a></li>
<li><a href="#"><img src="./demo/SKI2016-24-small.jpg"></a></li>
<li><a href="#"><img src="./demo/SKI2016-38-small.jpg"></a></li>
<li><a href="#"><img src="./demo/SKI2016-26-small.jpg"></a></li>
<li><a href="#"><img src="./demo/SKI2016-15-small.jpg"></a></li>
</ul>
When DOM is ready start the plugin with the InfiniteSlideScroller function on your list. You can use parameters to personalize your slider.
$(document).ready(function() {
$('#scroller').InfiniteSlideScroller({
width: '100%',
height: '500px',
speed: 2,
gutter: 0
});
});
| Property name | Default value | |
|---|---|---|
| width | 200 | Set the with of the slider. It can take all the css size units (px, %, em, vw...) |
| height | 200 | Set the height of the slider. It can take all the css size units (px, %, em, vh...) |
| speed | 5 | Set the speed of the slider. From 0 (no movement) to infinite (hiiiiiiigh speed) |
| gutter | 0 | Set the width between to slides |