Press "Enter" to skip to content

Animated Scrolling of Series With jQuery | jquery.serialScroll

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *