Ultra jednostavan jQuery slider slika
Ako ste u potrazi za ultra jednostavnim slider-om slika onda je ovo prava stvar za vas. Jedino što je potrebno imati je:
<div class="image_slider">
<div class="slider_back">
<img class="slider_img" src="http://www.piersharding.com/download/slides/img/500x200.gif" />
<img class="slider_img" src="http://www.piersharding.com/download/slides/img/500x200.gif" />
</div>
</div>
- image_slider - je kontenjer u kojem se nalazi čitav slider
- slider_back - je kontenjer u kojem se nalaze sve slike johe želite prikazivati
- slider_img - je klasa slike koju morate dodati svakoj slici
Osim toga, potrebna vam je i malo jquery koda. Jedino što možete promijeniti po želji je timeBetweenSlides varijablu koja služi za određivanje vremena pojavljivanja slika i trenutno je postavljena na 4 sekunde.
zSlider();
function zSlider() {
var timeBetweenSlides = 4000;
var br = 0;
var curSlide = 1;
$(".slider_back .slider_img").each(function(index) {
if (br == 0) {
$(this).show();
}
br++;
});
timeout();
function timeout() {
console.log(curSlide);
if (br > 1) {
setTimeout(function() {
$(".slider_back .slider_img:nth-child(" + curSlide + ")").fadeOut("400", function() {
curSlide++;
if (curSlide > br) {
curSlide = 1;
}
$(".slider_back .slider_img:nth-child(" + curSlide + ")").fadeIn("400");
});
timeout();
}, timeBetweenSlides);
}
}
};
Funkcionalan kod možete vidjeti na primjeru ispod: