06.maj - slajder za slike
Zadatak:
Dat je folder sa slikama (spakovan: slike.zip) i sledeća HTML struktura na web stranici:
Napraviti web stranicu na kojoj se smenjuju slike, jedna za drugom, u vremenskom intervalu od 3 sekunde. Nakon prikaza poslednje slike u nizu prikazuje se ponovo prva slika. Ispod slike koja se trenutno prikazuje treba da se nalazi indikator u vidu kružića koji prikazuje koja slika u nizu je trenutno prikazana.
Prilikom prikaza slike, korišćenjem CSS ocobine "opacity" kreirati efekat "FadeIn" gde slika od potpuno providne postepeno (u roku od 1000ms) postane potpuno vidljiva.
Takođe, potrebno je istovremeno sa smenom slika u slajderu, u divu pored slike prikazati i podatke o aktivnoj slici (naziv, godinu, kratak opis i slično)
Možete pisati svoje opise ili upotrebiti iz fajla: opisiSlika.txt
Predlozi / saveti za rad:
Može se raditi sa jQuery ili sa običnim JavaScript-om. Razlika je mala. Na primer, za kreiranje niza slika:
jQuery: var nizSlika = $("img");
JS: var nizSlika = document.getElementsByTagName("img");Predlog rada na času:
- može se napraviti niz slika, naslova, opisa, godina, dugmića
- koristiti funkciju koja vrši prikaz svake 3 sekunde (setInterval za tu funkciju, ali je i pozvati jednom na početku)
- jedan način je da u prikazu prvo sve nestane, pa da se promeni sadržaj, pa se polako pojavi sa izmenjenim sadžajem
ako je potrebno klikom na dugme promeniti sadržaj, prvo clearInterval i clear za tajmere, pa promeniti sadržaj, pa ponovo setInterval
Cilj ovog časa je vežbanje rada sa nizovima, i sa periodičnim izvedbama funkcije i kašnjenjima.
Bootstrap ima više varijanti za izvedbu nečeg sličnog: Carousell
Isto tako, ima na Internetu dosta JS ili jQuery biblioteka sa kojima se može izvesti Carousell
Jedna od izvedbi uz korišćenje Bootstrapa (slično rešenje) postoji na https://www.w3schools.com/bootstrap/bootstrap_carousel.asp