Slide show animations have become really popular on modern websites,they add a major beauty and professionalism to a website...this simple tutorial is on how to create images slide show on a website,this Slide show involves jquery library and the plugin involved in this tutorial which is "bxslider" plugin this plugin is part of the massive jquery library....
For the plugin to work,you will need to reference the jquery and bxslider libraries in the head section of your web page....the plugin .comes as a zip package so all you need do is download and extract to the folder your webpage is....
The tutorial....
CALLING THE LIBRARIES...
The first thing to do is reference the libraries like this in the head section....
<Script src="jquery.js"></script>
//this is the main library..
<script src="jquery.slide.js"></script>
//the bxslider JavaScript library..
<Link rel="stylesheet"href="jquery.slider.CSS"/>…
//the css library..

PREPARING THE IMAGES...
To begin your slide show,you need some images to work with.The images are very simple to prep...
Let's prepare the images...
<UL class="slide">
<li><img src="pic1.jpg"/></li>
<li><img src="pic2.jpg"/></li>
<li><img src="pic3.jpg"/></li>
<li><img src="pic4.jpg"/></li>
<li><img src="pic5.jpg"/></li>
<li><img src="pic6.jpg"/></li>
</UL>
As easy as that...

THE ANIMATION FUNCTION...
for the animation to finally work,we create a function to handle the animation using the jquery document.ready syntax which is put inside the head section(it must be put in the head section...)...
the syntax for creating the function is ...
$(Document).ready(function(){
$('.slide').bxslider();
});

THE PARAMETERS....
The above function does not work yet until we have added a few configurations to it...
The bxslider() takes a few parameters to actually work,the parameters are added like this ...
$(Document).ready(function(){
$('.slide').bxslider({ mode: 'horizontal'.....});
});
The parameters that can be added to the plugin are explained below....

MODE:
This is the type of transition between the slides,the possible values are,(horizontal,vertical and fade)...

SPEED:
the transition's duration(ie time for Next slide to come in)..it is mearsured in milliseconds and the default is 500 ...

SLIDE MARGIN...
The margin between each slide,it is written in integer and the default is 0...

RANDOMSTART:
To start with a random image,it has a boolean value(true or false)...

INFINITELOOP:
If set to true,clicking Next while transition is on the last slide will take it back to the first and vice versa.it also has a boolean value...

HIDECONTROLONEND(HideControlOnEnd)...
If set to true,the Next and previous buttons will be disabled once transition is ended..it has a boolean value...

CAPTION:
Used to include image captions,this captions are gotten from the <img> title attribute..it has a boolean value...

TICKER:
Use slider in ticker mode,it has a boolean value...

ADAPTIVEHEIGTH(AdaptiveHeigth)
adjust slider height based on each sliders height,it has a boolean value..

RESPONSIVE:
enable or disable auto resize of slides,it has a boolean value..

PRELOADIMAGES(PreloadImages)
if set to all,images will be previewed before transition starts..the values are (all and visible)...

TOUCHENABLED(TouchEnabled)
if set to true,slides will allow touch swipe transition..it has a boolean value..

CONTROLS:
if set to true,previous and Next buttons will be added..it has a boolean value...

NEXTTEXT(NextText)..
the text to be written on the Next button...it has a string value..

PREVTEXT(PrevText)..
Thesame with nexttext...

AUTOCONTROLS(AutoControls)
If set to true,the start and stop controls will be added..has a boolean value...

STARTTEXT(StartText)
the text to be written on the start control...has a string value..

STOPTEXT(StopText)
vice of STARTTEXT...

AUTOCONTROLSCBINE(AutoControlsCombine)
if set to true,when playing,only the stop control is displayed and vice versa..has boolean value..

AUTO
If set to true,transition will auto start..has a boolean value..

MINSLIDES(Minslides)
minimum number of slides to be shown..written in integers

MOVESLIDES(MoveSlides)
number of slides to move on transition,it must be equal to minslides and maxslides..written in integers..

SLIDEWIDTH(SlideWidth)
Width of each slide ...written in integers(px)..

please leave your comments

Nice tuts, I use the "anything slider plugin" though

okay, tanx (at least someone who cares about something ....)