U ovoj lekciji ću vam pokazati kako se formira tzv. vrteška tj. element koji vam omogućava da na relativno malom prostoru prikažete više različitih slika. Ja ću ovakav element smestiti između segmenta u kome se nalazi poziv na akciju i onog koji sadrži listu zaposlenih. U tom cilju ću prvo izborom ikone sa znakom plus (+) kreirati novi segment i odmah mu dodeliti jednu kolonu. Zatim ću preći na listu sa vidžetima, ubaciti novi naslov (Heading) i odmah promeniti podrazumevani sadržaj. Nakon što izborom odgovarajuće ikone centriram ovaj tekst mogu da ispod njega dodam kratak opis i dovršim prvi deo posla.

Za oblikovanje ovog teksta je potrebno da prvo otvorim Style odeljak i izborom odgovarajuće ikone (Center), promenim njegovo poravnanje. Nakon toga ću u Advanced odeljku aktivirati procentualne odnose, otključati automatsko povezivanje i definisati odgovarajuće margine.

Pošto sam na ovaj način pripremio odgovarajuću prostor, mogu da u polje za pretragu upišem Car i prikažem vidžete koji omogućavaju kreiranje različitih tipova vrteški. Ja ću se ovom prilikom odlučiti za onaj koji podrazumeva upotrebu ilustracija (Image Carousel) i jednim potezom ga smestiti između naslova i dodatnog opisa. Nakon toga je potrebno da izaberem slike koje će se automatski smenjivati pa ću u tom cilju prvo kliknuti na ovu ikonicu i prikazati čitavu galeriju. Da bih malo suzio ovaj izbor, ja ću u polje za pretragu upisati „about carousel“ a to će se automatski odraziti na ukupan prikaz. Pošto su mi potrebne sve ponuđene slike, dovoljno je da jednim klikom selektujem onu koja se nalazi na prvom mestu a zatim da uz držanje Shift tastera izaberem i poslednju. To će biti dovoljno da se sve izabrane sličice pojave na dnu ekrana pa sada treba još samo da pokrenem funkciju Create New Gallery i eventualno dodam odgovarajuće komentare (Captions). Osim toga, postoji mogućnost da na jednostavan način promenim postojeći redosled, pa ću iskoristiti priliku da sa nekoliko poteza mišem premestim neke fotografije. Na kraju treba još samo da kliknem na dugme koje se nalazi u donjem desnom uglu (Insert Gallery) i na taj način dovršim čitav postupak.

Čim se na ekranu pojave novi sadržaji, postoji mnogo načina da se njihov izgled prilagodi konkretnim potrebama. Ja ću za početak promeniti veličinu pojedinačnih sličica i u tom cilju za Image Size izabrati opciju Full. To će se automatski odraziti na njihov prikaz pa mogu da nastavim dalje i promenim broj fotografija koje se će istovremeno pojaviti na ekranu (Slides To Show). Kao što vidite, ovaj parametar je moguće vrlo precizno definisati a ja ću se ipak zadržati na podrazumevanoj (Default) vrednosti.

Parametar Slides To Scroll mi omogućava da odredim za koliko slika treba pomeriti čitavu vrtešku a ako aktiviram opciju Image Strech to će se automatski odraziti na njihovu proporciju. Meni to nije potrebno, pa zato neću menjati ovaj parametar a isto važi i sledeću opciju (Navigation), jer mi odgovara da na vrtešci istovremeno budu prikazane bočne strelice i niz tačkica (Arrows and Dots), koje omogućavaju direktan izbor željenog segmenta.

Ukoliko želite da prikaz koji se pojavljuje na ekranu bude povezan sa originalnim fotografijama to možete postići ako za parametar Link izaberete opciju Media File. Meni to nije potrebno, pa ću se zato zadržati na opciji None i odmah preći na sledeći parametar – Caption. On služi za prikaz dodatnih informacija a pošto mi one trenutno nisu na raspolaganju i ovaj parametar može da ostane isključen tj. postavljen na None.

Ako izborom ove strelice prikažem dodatne opcije (Additional Options), biću u prilici da odredim brzinu kojom će se smenjivati pojedine slike. Osim toga, moguće je izborom opcije Autoplay aktivirati automatsko pokretanje vrteške, dok za njeno privremeno zaustavljanje služe opcije Pause on Hover i Pause on Interaction. Kod mene je trenutno brzina reprodukcije podešena na 5.000 a to znači da će se izabrane slike automatski smenjivati svakih pet sekundi. Ukoliko želite da se čitav ciklus neprekidno ponavlja, aktivirajte opciju Infinite Loop, dok vam parametar Animation omogućava da odredite brzinu kojom će ova smena biti izvršena.

Ja ću još jednom otvoriti Style odeljak, jer bih želeo da vam pokažem opcije koje služe za kontrolu strelica i dodatnih tačaka. One vam omogućavaju da promenite položaj pomenutih elemenata (Position), njihovu veličinu (Size) i boju (Color). U Image odeljku se nalaze opcije koje služe za kontrolu pojedinačnih slika a to uključuje njihovo poravnanje i međusobni razmak (Spacing). Ja ću ovaj poslednji parametar promeniti na Custom i zatim klizač postaviti na 35. To će biti dovoljno da se između slika pojavi dovoljno rastojanje i da čitava vrteška postane preglednija.

Pre nego što dovršim ovu lekciju, ja ću još jednom proveriti sve parametre a pošto mi se čini da je ovde sve na svom mestu, mogu da pokrenem funkciju Responsive Mode i simuliram prikaz na različitim uređajima. Sada se jasno može videti na će na tablet računarima vrteška obuhvatiti samo dve slike dok će na mobilnim uređajima ovaj prikaz biti sveden na samo jednu fotografiju. To mi savršeno odgovara, pa mogu da kažem da sam uspešno obavio i ovaj zadatak.