serialScroll.js is the jQuery public content plugin that helps you create carousels, slide shows, photo slides, news feeds, and any items that can be scrolled in a specific area.
Notes:
- The hash of settings is passed to jQuery.scrollTo, so in addition to the jQuery.localScroll settings, you can use any of the jQuery.scrollTo files. Check plugin documentation for more information.
- Most of the default settings for this plugin belong to jQuery.scrollTo, check the demo for an example of each option.
How to make use of it:
1. Load the required JavaScript information within the HTML doc.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.scrollTo.min.js"></script> <script src="/path/to/jquery.serialScroll.min.js"></script>
2. Initialize the plugin on a series of elements you’d like to scroll through.
<div id="screen"> <img class="prev" src="angle-left-solid.svg" alt="prev" width="42" height="53" /> <div id="navigation"> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 3</a></li> <li><a href="#">Section 5</a></li> </ul> </div> <div id="sections"> <ul> <li> <h2>Section 1</h2> </li> <li> <h2>Section 2</h2> </li> <li> <h2>Section 3</h2> </li> </ul> </div> <img class="next" src="angle-right-solid.svg" alt="next" width="42" height="53" /> </div>
3. All default choices.
// duration in ms duration: 1000, // or 'y', 'xy' axis: 'x', // trigger event event: 'click', // first element (zero-based index) start: 0, // step size step: 1, // ignore events if already animating lock: true, // infinite loop cycle: true, // use contant speed ? constant: true // navigation element navigation: null, // target container target: window, // interval in ms interval: 0, // allow dynamic content e.g. ajax lazy: false, // stop any previous animations to avoid queueing stop: false, // force the scroll to the first element on start ? force: false, // click on the images to scroll to them jump: false, // selector of scrollable items items: null, // selector of prev button prev: null, // selector of next button next: null, // called before scrolling onBefore: function() {}, // exclude elements here exclude: 0, // easing function easing: null
Generic Content Scroller, jQuery.scrollTo Plugin/Github
See Demo And Download
Official Website(flesler): Click Here
This superior jQuery/javascript plugin is developed by flesler. For extra Advanced usage, please go to the official website.
Be First to Comment