HTML List Based Scroller / Ticker Plugin With jQuery - simpleTicker

File Size: 4.2 KB
Views Total: 16181
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
HTML List Based Scroller / Ticker Plugin With jQuery - simpleTicker

A lightweight, fast, cross-browser jQuery plugin which lets you generate an auto scrolling/fading/sliding scroller from an html unordered list. Great for news / stock ticker or text scroller.

How to use it:

1. Add jQuery library and the jQuery simpleTicker plugin's JS & CSS files into the html page.

<link href="jquery.simpleTicker.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery.simpleTicker.js"></script>

2. Wrap you html list into a DIV container with the CSS class of 'ticker' as follow:

<div id="demo" class="ticker">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

3. Enable the ticker plugin with default options.

$.simpleTicker($("#demo"));

4. Set the animation you want to use. Available animation types:

  • roll
  • slide
  • fade
$.simpleTicker($("#demo"),{
  'effectType':'roll'
});

5. Config the animation.

$.simpleTicker($("#demo"),{
  speed : 1000,
  delay : 3000,
  easing : 'swing',
  effectType : 'slide'
});

Changelog:

2019-05-01

  • Fix format.

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