Well u can do something like this.
Whole code here ->
http://pastebin.com/Xxx4urR9
Demo here ->
http://sorlakertest2.hostzi.com/1-sliderndescription/
This is an example code of your slider contents.
PHP Code:
$div = array(
"images" => array(
0 => "http://image.naldzgraphics.net/2012/09/15-the-abstract.jpg",
1 => "http://www.inspirationmix.com/wp-content/uploads/2010/11/abstract-colorful-background-green-2.jpg",
2 => "http://www.kkuodesign.com/wordpress/wp-content/uploads/2010/07/iphone-wallpaper-abstract-design-71.png",
3 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-55.jpg",
4 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-21.jpg"
),
"descriptions" => array(
0 => "Desc1",
1 => "Desc2",
2 => "Desc3",
3 => "Desc4",
4 => "Desc5"
)
);
N this is the jquery function.
Code:
$(function (){
var numberOfImages = <?php echo count($div['images']); ?>;
var images = new Array();
var descriptions = new Array();
<?php
for($i = 0; $i < count($div['images']); $i++) {
echo "images[".$i."] = \"".$div['images'][$i]."\";\n";
echo "descriptions[".$i."] = \"".$div['descriptions'][$i]."\";\n";
}
?>
function sortImages(){
var randomNumber = Math.floor((Math.random() * numberOfImages)); //this will get a random number from 0 -> numberOfImages - 1
//alert(randomNumber);
$('#slider').css("background-image", 'url("'+ images[randomNumber] +'")');
$('#sliderDescription').html(descriptions[randomNumber]);
}
sortImages();
setInterval(function (){sortImages()}, 1000); // the background will change every 5 seconds.
});
Another way is to display all the images n do that .hide() .show() .fadeIn() .fadeOut thing as we do in jquery.