Generic Content Scroller With jQuery - serialScroll.js

serialScroll.js is a generic content scroller jQuery plugin that helps you create carousels, slideshows, image sliders, news tickers, and any elements that can be scrolled in a specific area.

Based on the scrollTo plugin that allows to smoothly scroll to a specific position of a container or the whole document.

How to use it:

1. Load the necessary JavaScript files in the HTML document.

<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>

$('#screen').serialScroll({
  target: '#sections',
  items: 'li',
  prev: 'img.prev',
  next: 'img.next',
  axis: 'xy',
  navigation: '#navigation li a',
  duration: 700,
  force:true,
  onBefore:function( e, elem, $pane, $items, pos ){
    e.preventDefault();
    if( this.blur )
      this.blur();
  }
});

3. All default options.

// 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 

---

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