<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#BUS-slider').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#BUS-slider {
width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#BUS-sliderContent {
width: 550px;
position: absolute;
top: 0;
margin-left: 0;
}
.BUS-sliderImage {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.BUS-sliderImage span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.BUS-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 550px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 550px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 110px !important;
height: 315px;
}
</style>
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIjoUU7vY0hpM6dANsgBbKtMumAPCvbZbO1BfxKsN4LiniG04cUKC6f3fC63xFkwdbt60tjwC95s-_4ABdUvd95jNIcSBvHrFpyofvU5TXN1EuzIehhMjN3XwRTVL5juwymFLNt_ikZo4/s144-p/froggy-01.jpg"width="550"height="335"/>
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<a href="#"><img src="https://lh6.googleusercontent.com/-tMlCuLM8W9U/T1ePb8zPZ8I/AAAAAAAAWYA/Ts4L8-EKRLw/s144-p/liquidmoon.jpg"width="550"height="335"/>
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<a href="#"><img src="https://lh5.googleusercontent.com/-Jj2icsmjKU0/TRZIEbg1DrI/AAAAAAAAPII/W3qlBQN8EEY/s144-p/DSC_6188.jpg"width="550"height="335"/>
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<a href="#"><img src="https://lh5.googleusercontent.com/-qaIEtFbC4Ww/TRo3lpIItlI/AAAAAAAAAbY/PrrDCpaGpUM/s144-p/DSC_9636.jpg"width="550"height="335"/>
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<a href="#"><img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/>
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<div class="clear BUS-sliderImage"></div>
</ul>
</div>
<br/>