jQuery Plugin For Image Banner with Swapping Description - divSwappingBanner

File Size: 37.5KB
Views Total: 1210
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Image Banner with Swapping Description - divSwappingBanner

divSwappingBanner is a super tiny jQuery plugin that creates a swapping div container to display the description of an image that you select.

How to use it:

1. Include jQuery library and jQuery divSwappingBanner plugin on the page

<script src="jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="jquery.divSwappingBanner.js" type="text/javascript"></script>

2. The CSS

.divSwappingBannerContentDiv {
border: 1px solid #ccc;
.divSwappingBannerImage {
border: 1px solid #ccc;

3. Markup the html

<link rel="stylesheet" type="text/css" href="divSwappingBannerStyle.css">
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-1'>
<p>Test div 1 content</p>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-2'>
<p>Test div 2 content</p>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-3'>
<p>Test div 3 content</p>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-4'>
<p>Test div 4 content</p>
<div class='divSwappingBannerContentDiv' id='divSwappingBanner-div-5'>
<p>Test div 5 content</p>

4. Call the plugin

$(document).ready( function() {

Change LOG:

v1.1.0 (2013-06-30)

  • Added auto scroll feature that allows it to select each image one by one automatically. 
  • Added new options to turn auto scroll on and set the interval time.

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