Slideshow is very useful for fancy websites. Recently I worked for a Bollywood portal. There I have to show top 10 actresses of Bollywood with little description about them. I did this using JQuery. Here to show you the demo I used only 3 images (Image-A.png, Image-B.png & Image-C.png). Resolution for these images are 500 x 257. You can customize the below code as per your requirements. If you are changing size of images you just need to update related CSS classes.
Technically speaking to implement JQuery Slideshow is very easy. Refer to the below example after HTML & CSS i wrote a small Jquery function. In side the function I am tracking each slide & storing them to a temporary div. To move the slides I have the updatePosition() function which called in each 3 seconds using setInterval();
To show description with image in this demo I added one transBg.png image which will show you the transparent background over each slide. In HTML for each slide I have div with the class eachSlide. In side this I have image & one more div for description. To set margin for description here I used paragraph inside the description div. You can add any kind of HTML in this div as your description.
To run this example Copy the following code to a file jquery-slideshow.htm. Then save the below 4 images in the same folder & Run. Keep remember in this demo I used Jquery CDN link.
JQuery-Slideshow.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of JQuery Slideshow</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
var presentPosition = 0;
var slideWidth = 500;
var inSlide = $('.eachSlide');
var totalNoSlides = inSlide.length;
setInterval(updatePosition, 3000);
inSlide.wrapAll('<div id="tempHolder"></div>');
inSlide.css({ 'float': 'left' });
$('#tempHolder').css('width', slideWidth * totalNoSlides);
function updatePosition() {
if (presentPosition == totalNoSlides - 1) {
presentPosition = 0;
}
else {
presentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#tempHolder').animate({ 'marginLeft': slideWidth * (-presentPosition) });
}
});
</script>
<style type="text/css">
#slideshow {
position: relative;
}
#slideshow #showArea {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #showArea .eachSlide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
/*Class for Description*/
.description {
background: url("transBg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
position: absolute;
color: #FFFFFF;
font-family: Arial,sans-serif,verdana;
height: 70px;
left: 0px;
top: 190px;
width: 100%;
margin: 0px;
padding: 0px;
}
/*Setting margin for Description Paragraph*/
.description p {
margin: 10px 0px 0px 10px;
}
</style>
</head>
<body>
<!--Slideshow main Div-->
<div id="slideshow">
<div id="showArea">
<!--Slideshow indivisual Div-->
<div class="eachSlide">
<img title="" alt="" src="Image-A.png" />
<div class="description"><p>From the heart beats of Millions, You are going to read about the Queen of Bollywood. The real name Katrina Turquotte...</p></div>
</div>
<div class="eachSlide">
<img title="" alt="" src="Image-B.png" />
<div class="description"><p>From our recent study we found Sunny Leone as one of the most searched actress from Film Industry...</p></div>
</div>
<div class="eachSlide">
<img title="" alt="" src="Image-C.png" />
<div class="description"><p>Priyanka Chopra is an Indian Celebrity. She was born on 18th July 1982 at Jamshedpur...</p></div>
</div>
</div>
</div>
</body>
</html>
Images
transBg.png
Image-A.png
Image-B.png
Image-C.png
