This time I will share jQuery Plugin and tutorial about Mouse-aware Element Scroller Plugin With jQuery – Infinite Scroller, hope it will help you in programming stack.
An infinite, mouse-aware jQuery scroller plugin which has the ability to automatically scroll a list of position: absolute html elements left or right depending on the mouse position.
How to use it:
1. Include the stylesheet infinite-scroller.css in the header, and the JavaScript infinite-scroller.js after jQuery library but before the closing body tag.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="infinite-scroller.js"></script> |
3 |
<link href="infinite-scroller.css" rel="stylesheet"> |
2. Create an html list for the infinite scroller.
3 |
<li><img src="1.jpg"></li> |
4 |
<li><img src="2.jpg"></li> |
5 |
<li><img src="3.jpg"></li> |
3. Initialize the plugin to create a default scroller that will auto scroll on mouse hover.
4. Enable the auto scroll on page load instead of mouse hover.
1 |
$("#example").infiniteScroller({ |
2 |
scrollOnMouseOver: false |
5. Set the scroll direction.
1 |
$("#example").infiniteScroller({ |
6. Set the animation speed.
1 |
$("#example").infiniteScroller({ |
7. If you’d like to reset the animation speed on mouse out:
1 |
$("#example").infiniteScroller({ |
Change log:
2017-04-07
- Maintain original direction on mouse out
2017-04-06
This awesome jQuery plugin is developed by chriswatts91. For more Advanced Usages, please check the demo page or visit the official website.
