Fork me on GitHub


lightweight JQuery infinite slide scroller plugin

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.

Download Documentation

How to use it ?

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>

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() {
                            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