s3Slider jQuery plugin – jQuery Image Rotator

This is the s3Slider jQuery main plugin page : http://www.serie3.info/s3slider/

View the live example of this s3Slider jQuery plugin based on jQuery

View the usage of this plugin here : http://dreamweavertutorial.co.uk/dreamweaver/video/jquery-image-rotator.htm

HOW TO USE

It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.

JavaScript code inside <head> section of HTML page :

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

A sample code which needs to be put in <BODY> tag :

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

The CSS Code needs to be put in <style> tags in <head> section

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Calling of the JavaScript Library is initiated by the following lines :

Then you need to initalize s3Slider and set the duration of how long will one picture be shown on the page (value is in miliseconds).

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

One thought on “s3Slider jQuery plugin – jQuery Image Rotator

Comments are closed.