You can use nivo slider .
You just have to mention description of an image in alt attribute and title of an image in title attribute.
And just attach the plugin to your wrapper element:
$(window).load(function() {
$('#main').nivoSlider();
});
Edit1:
A simple way to create such plugin
jQuery.fn.imgSlider = function( options ) {
// default settings:
var defaults = {
textColor: "#000",
backgroundColor: "#fff",
fontSize: "16px",
getTextFromTitle: true,
getTextFromAlt: false,
animateOpacity: true,
animationDuration: 500,
clickImgToGoToNext: true,
clickImgToGoToLast: false,
nextButtonText: "next",
previousButtonText: "previous",
nextButtonTextColor: "red",
previousButtonTextColor: "red"
};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
// Plugin code would go here...
});
};
call the plugin
$( "div" ). imgSlider();
Edit 2
I have created a jQuery Image Slider Plugin.
here is the example with annotated code.
4
solved Creating first jQuery slideshow plugin, converting from Javascript