s3Slider jQuery plugin jest wtyczka, dziięki której możemy uzyskać efekt slideshow oparty na bibliotece jQuery. Obrazy zmieniają się w określonym czasie, a opisy pojawiają się na półprzezroczystym tle.
Demo: http://www.serie3.info/s3slider/demonstration.html
Instalacja:
1. należy pobrać jQuery ze strony oficjalnej
2. następnie ze strony autora s3Slider jQuery plugin nalezy ściągnąć pliki źródłowe
Pełna wersja (z przykładami zastosowania) (74kb)
Wersja nieskompresowana (4.12kb)
Wersja skompresowana (1.66kb)
Teraz w naszym pliku (przykładowo index.html) określamy w kodzie namiary na najpotrzebniejsze skrypty:
-
<script src="js/jquery.js" type="text/javascript"></script>
-
<script src="js/s3Slider.js" type="text/javascript"></script>
Przykładowy kod htmlowy z zastosowanym efektem s3Slider
-
<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>
Kod 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;
-
}
Inne dodatkowe uwagi dostępne na stronie oficjalnej plugina.
