Customizable Horizontal List Scroller Plugin With jQuery - Web Ticker

Web Ticker is a simple yet fully customizable JQuery scroller plugin which allows to scroll horizontally and infinitely through a list of web content (and even RSS feeds) with smooth transition effects.

How to use it:

1. To get started you need to load the jQuery web ticker plugin after jQuery library as follows:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.webticker.js"></script>

2. Create a list of web content you want to scroll through.

<ul id="example" >
  <li>Item 1</li>   
  <li>Item 2</li>
  <li><img src='3.jpg'></li>
  ...
</ul>

3. Call the function on the html list and done.

$("#example").webTicker();

4. Customize the Web Ticker plugin by passing in the following options to the webTicker() function on init.

$("#example").webTicker({

  // scrolling speed
  // pixels per second
  speed: 50, 

  // 'left' or 'right'
  direction: 'left',

  // start in moving state or a paused state
  moving: true,

  // start outside of the visible area
  startEmpty: true,

  // duplicated if necessary to remove any white space
  duplicate: false,

  // RSS feed support
  rssurl: false,

  // pause on hover
  hoverpause: true,

  // The time (in minutes) it takes to refresh the RSS Feed
  rssfrequency: 0,

  // Defines if the data update will reset the ticker including only new items or update items inline
  updatetype: 'reset',

  // custom transition effect
  transition: 'linear',

  // height of the scroller
  height: '30px',

  // maskleft and maskright require a width setting in your css to work
  maskleft: '', 
  maskright: '',

  // width of the Mask
  maskwidth: 0
  
});

5. Pause the scroller.

$("#example").webTicker('stop');

6. Resume the scroller.

$("#example").webTicker('cont');

7. Update the scroller.

$("#example").webTicker('update',
  '<li>Item 1</li> 
   <li>Item 2</li> 
   <li>Item 3</li> 
  'swap',
  true,
  false
);

8. Change the transition effect.

$("#example").webTicker('transition', 'ease');
// or
$("#example").webTicker('transition', 'linear');

---

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