A jQuery content scroller!
Endless river is a jQuery plugin, that animates content and make it scroll endlessly!
The usefull feature is that you don't have to set widths to elements, because speed is set in pixel/second!!
EndlessRiver will calculate the best width for the <li> element and keep speed constant!
The only requirement needed is jQuery that you can install it via Bower.
You can download the source files, or install via npm by running
npm i endlessRiver
Simply include the endlessRiver JS and CSS
<html>
<head>
<script type="text/javascript" src="path-to/js/endless-river.min.js"></script>
<link type="text/css" rel="stylesheet" href="path-to/css/endless-river.min.css" />
</head>
</html>Create an <ul> list like this
<ul id="myUl">
<li> | </li>
<li style="color: red">Espresso</li>
<li style="color: orange">Cappuccino</li>
<li style="color: yellow">American</li>
<li style="color: green">Tea</li>
<li style="color: black">Milk</li>
<li style="color: blue">Juice</li>
<li> | </li>
</ul>and call it like this!
$(document).ready(function(){
$("#myUl").endlessRiver();
});Params
| option | description | type | default |
|---|---|---|---|
| speed | Speed of animations in pixel/second | Number | 100 |
| pause | Pause on hover: if true, scrolling will stop on mouseover | Boolean | true |
| buttons | If true, shows play/stop buttons | Boolean | false |
- files renamed to kebab-case
- code refactored
- added gulpfile
- added minified files
- added demo page
Check out LICENSE file (MIT)