jQuery Plugin For Infinite Any Content Scroller - scrollForever

scrollForever is a minimalist jQuery plugin used to infinitely scroll through a list of Html elements. Supports vertical scroll, horizontal scroll, continuous scroll, auto scroll, and pause scroll on hover. A little similar to the old Html <marquee> tag.

How to use it:

1. Create a list of Html elements you want to scroll through.

<div class="scroller" id="demo">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
  </ul>
</div>

2. Load the latest jQuery library and the jQuery scrollForever plugin at the end of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scrollForever.js"></script> 

3. Call the plugin with basic setup on the parent element.

$("#demo").scrollForever();

4. Add custom CSS to style the content scroller.

.scroller {
  height: 200px;
  width: 800px;
  overflow: hidden;
  ...
}

.scroller li {
  height: 198px;
  width: 198px;
  float: left;
  ...
}

5. Available options to custom the scroll behaviors.

$("#demo").scrollForever({

// distance between slides
placeholder: 0,

// scroll direction. left or top
dir: 'left',

// container element
container: 'ul',

// inner element
inner: 'li',

// animation speed
speed: 1000,

// slide interval
delayTime: 0,

// continuous scroll
continuous: true,

// how many slides to slide at a time
num: 1

});

Change log:

2014-10-29

• add resize function

---

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