S3Slider JQuery Plug-in

S3Slider JQuery Plug-in

Want to have image sliders in your website?

This plug-in enanbles you to have one. This plug-in offers a slideshow feature which is unique. The slideshow offers smooth and soft transitions of images. The transitions can be customized too. The timing for each slide can be set. The slide show also features the tilts and descriptions of the images. The tilts and descriptions are also animated and include an effect. With these amazing options the website can be made more approachable and appealing to the visitor’s eye.


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.

jQuery can be download from jQuery`s homepage.

[javascript language="css"]<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script> [/javascript]

Important: For the script to work properly there is a set of rules that must be followed.


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


If you set that main div id is s3slider as we did here, that is the name that must be prefix for all other classes and id`s for that specific gallery (slide show). For example, if you set an id for main div as your_name, the inner id must be your_nameContent and the class .your_nameImage like in example above.

The second thing is that every .your_nameImage element in it self must have span. Also, the last div with class clear must also have an class of image holder in this case .your_nameImage. if you dont put that, the last image will NOT be shown in the slide show.


[javascript language="css"]#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;

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


[javascript language="css"]$(document).ready(function() {
timeOut: 4000
}); [/javascript]

Take a look at the live Example

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones.

For downloading the full version of this script follow the below link please


To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed