jQuery Plugin For Auto-cycling Slideshow - News List

News List is a tiny yet customizable jQuery plugin that converts a list of items  into an auto-rotating slideshow box with pagination controls. 

Items will fade in and out over a configurable amount of time, but any individual item can be chosen manually, which will stop the auto-cycle. The class for the cycler and the control link hover will need to be changed in the newslist.css file if you don't use the defaults.

Many sites load information and news in a list format which can be a great way to display content. With this jQuery plugin by your side, creating a simple and very attractive slideshow from a list of news posts is a piece of cake.

How to use it:

1. Add a group of items into the news list.

<div id="newslist">
  <!-- Items -->
  <div class="items">
    <div class="item">
      News item #1.
    </div>
    <div class="item">
      News item #2.
    </div>
    <div class="item">
      News item #3.
    </div>
    ...
  </div>
  <!-- Pagination Controls -->
  <div class="controls"></div>
</div>

2. Download the plugin and insert the jQuery News List plugin's files into the document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery News List Plugin -->
<link href="/path/to/newslist.css" rel="stylesheet" />
<script src="/path/to/jquery.newslist-min.js"></script>

3. Call the function on the top container to generate a default slideshow.

$(function(){
  $("#newslist").newslist();
});

4. Customize the slideshow by overriding the default parameters as shown below:

$("#newslist").newslist({

  // class of news items container
  'itemsDiv'        : '.items',

  // class of individual news item
  'item'            : '.item',

  // class of control link container
  'controlsDiv'     : '.controls',

  // is auto-cycler on?
  'cycler'          : true,

  // class for hovering over control links
  'hoverClass'      : 'on', 

  // speed, in milliseconds, of auto-cycler
  'cycleSpeed'      : 10000,

  // speed, in milliseconds, for news item to fade in
  'fadeSpeed'       : 1000,

  // number of times the whole slideshow should loop; 
  // if null, will loop indefinitely
  'maxLoops'        : null,

  // should the control links use a leading zero for items 1-9?
  'leadZero'        : false,
  
});

---

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