Ako trebate dodati visokokvalitetni jQuery klizač slike na svoju web stranicu, tada ćete u ovom članku pronaći opis potrebnih dodataka. Iako je JQuery znatno olakšao rad sa JavaScript-om, i dalje su nam potrebni dodaci za ubrzanje procesa web dizajna.
Možemo promijeniti neke od ovih dodataka i kreirati nove klizače koji su mnogo prikladniji za potrebe naše stranice.
Za druge klizače jednostavno dodajete naslove, slike i birate efekte prijelaza slajdova koji dolaze s klizačem. Svi ovi dodaci su popraćeni detaljnom dokumentacijom, tako da im dodavanje novih efekata ili funkcija neće biti teško. Možete čak promijeniti okidače zasnovane na događajima ako ste iskusni JQuery programer.
Najnoviji trendovi poput responzivnog dizajna vrlo su važni za web projekte, bilo da implementirate dodatak ili skriptu. Svi ovi elementi čine svaki od ovih dodataka vrlo fleksibilnim. Na ovoj listi je sve što je izašlo 2014. godine.
JQuery klizači slika Jssor Responsive SliderNedavno sam naišao na ovaj moćni jQuery klizač i mogao sam vidjeti iz prve ruke da odlično radi svoj posao. Sadrži neograničene mogućnosti koje se mogu proširiti kroz otvoreni izvorni kod klizača:
- Adaptive design;
- Više od 15 opcija prilagođavanja;
- Više od 15 efekata promjene slike;
- Galerija slika, vrtuljak, podrška za cijeli ekran;
- Vertikalni rotator banera, lista slajdova;
- Video podrška.
Demo | Skinuti
PgwSlider - responzivni klizač baziran na JQuery / ZeptoJedini zadatak ovog dodatka je da prikaže slajdove sa slikama. Veoma je kompaktan, budući da su JQuery fajlovi veličine samo 2,5 KB, što mu omogućava da se učita veoma brzo:
- Adaptive layout;
- SEO optimizacija;
- Podrška za različite pretraživače;
- Jednostavni prijelazi slika;
- Veličina arhive je samo 2,5 KB.
Demo | Skinuti
Fleksibilan i koristan JQuery klizač dizajniran za izvore vijesti sa listom publikacija na lijevoj strani i slikom prikazanom na desnoj strani:
- Adaptive design;
- Vertikalni stupac za prebacivanje vijesti;
- Proširena zaglavlja.
Demo | Skinuti
Ovaj klizač ne sadrži jQuery, ali bih ga želio predstaviti jer je vrlo kompaktan i može značajno smanjiti vrijeme učitavanja stranice. Javite mi ako vam se sviđa:
- Adaptive layout;
- Jednostavan dizajn;
- Različite opcije promjene slajdova;
- Minimalni JavaScript kod;
- Veličina je samo 3KB.
Demo | Skinuti
Galerija u stilu dokumenata raštrkanih na stolu sa fleksibilnim rasporedom i prekrasnim dizajnom trebala bi biti od interesa za mnoge od vas. Pogodnije za tablete i velike ekrane:
- Adaptive slider;
- Flat design;
- Nasumična promjena slajdova;
- Potpuni pristup izvornom kodu.
Demo | Skinuti
Demo | Skinuti
HiSlider je predstavio novi besplatni jQuery klizač s kojim možete kreirati razne galerije slika sa fantastičnim prijelazima:
- Adaptive slider;
- Ne zahtijeva znanje programiranja;
- Nekoliko nevjerovatnih šablona i skinova;
- Prekrasni efekti tranzicije;
- Podrška za različite platforme;
- Kompatibilan sa WordPress, Joomla, Drupal;
- Mogućnost prikaza različitih vrsta sadržaja: slike, YouTube video i Vimeo video zapisi;
- Fleksibilno podešavanje;
- Korisne dodatne funkcije;
- Neograničena količina prikazanog sadržaja.
Demo |Download
WOW Slider je prilagodljiv jQuery klizač za slike sa nevjerovatnim vizualnim efektima (domino, rotiranje, zamućenje, okretanje i blic, letenje, roletne) i profesionalnim predlošcima.
WOW Slider dolazi sa čarobnjakom za instalaciju koji vam omogućava da kreirate fantastične klizače za nekoliko sekundi bez potrebe za razumijevanjem koda ili uređivanjem slika. Verzije dodatka za Joomla i WordPress su također dostupne za preuzimanje:
- Potpuno odgovara;
- Podržava sve pretraživače i sve vrste uređaja;
- Podrška za uređaje na dodir;
- Jednostavna instalacija na WordPress;
- Fleksibilnost u konfiguraciji;
- SEO optimiziran.
Demo |Download
Nivo Slider je poznat u cijelom svijetu kao najljepši i najjednostavniji klizač slika. Dodatak Nivo Slider je besplatan i objavljen pod MIT licencom:
- Zahtijeva JQuery 1.7 i noviji;
- Prekrasni efekti tranzicije;
- Jednostavan i fleksibilan za konfiguraciju;
- Kompaktan i prilagodljiv;
- Open source;
- Snažan i jednostavan;
- Nekoliko različitih šablona;
- Automatsko izrezivanje slike.
Demo |Download
Ideja je inspirirana Appleovim klizačima, u kojima nekoliko malih elemenata može izletjeti s različitim efektima animacije. Programeri su pokušali implementirati ovaj koncept, uzimajući u obzir minimalne zahtjeve za kreiranje jednostavnog dizajna online trgovine, u kojem "leteći" elementi predstavljaju različite kategorije:
- Adaptive layout;
- Minimalistički dizajn;
- Različiti efekti ispuštanja i promjene slajdova.
Demo |Download
Vrlo jednostavan klizač koji zauzima 100% širine stranice i prilagođava se veličini ekrana mobilnih uređaja. Radi sa CSS prijelazima, a slike se "slažu" zajedno sa sidrima. Sidro se može zamijeniti ili ukloniti ako ne želite priložiti link na sliku.
Kada je instaliran, klizač se širi na 100% širine ekrana. Također može automatski smanjiti veličinu slika slajdova:
- Prilagodljivi JQuery klizač;
- puna veličina;
- Minimalistički dizajn.
Demo |Download
Elastic Content Slider automatski prilagođava širinu i visinu na osnovu dimenzija nadređenog elementa. Ovo je jednostavan jQuery klizač. Sastoji se od područja slajdova na vrhu i trake za navigaciju na dnu. Klizač prilagođava svoju širinu i visinu prema dimenzijama roditeljskog kontejnera.
Kada se gledaju na ekranima male dijagonale, navigacijske kartice se pretvaraju u male ikone:
- Adaptive design;
- Pomicanje klikom miša.
Demo |Download
Eksperimentalni klizač koji se kreće kroz slike u 3D. Dva snopa liče na hrpe papira, s kojih se, kada se pomiče, slike prikazuju u sredini klizača:
- Adaptive design;
- Flip - prijelaz;
- 3D efekti.
Demo |Download
Ovaj vodič će vam pokazati kako da kreirate klizač sa zaokretom: ideja je da se "iseče" i prikaže trenutni slajd dok otvarate sledeću ili prethodnu sliku. Koristeći JQuery i CSS animaciju, možemo kreirati jedinstvene efekte prijelaza:
- Adaptive design;
- Split tranzicija;
- Klizač preko celog ekrana.
Demo |Download
Bez nepotrebnih zvona i zviždaljki, veličine manje od 3KB. Koristite bilo koji HTML kod za svoje slajdove, proširite ga pomoću CSS-a. Sve što se odnosi na Unslider se nalazi na GitHubu:
- Podrška za različite pretraživače;
- Podrška za tipkovnicu;
- Podešavanje visine;
- Adaptive design;
- Podrška za unos dodirom.
Demo | Skinuti
Jednostavan i kompaktan dodatak (veličine samo 1 KB) koji kreira responzivni klizač koristeći elemente unutar kontejnera. ResponsiveSLides.js radi sa širokim spektrom pretraživača, uključujući sve verzije IE od IE6 i novijih:
- Potpuno odgovara;
- Veličina 1 KB;
- CSS3 tranzicije sa mogućnošću pokretanja putem JavaScripta;
- Jednostavno označavanje pomoću lista sa nabrajanjem;
- Mogućnost prilagođavanja efekata prijelaza i trajanja pregleda jednog slajda;
- Podržava mogućnost kreiranja više dijaprojekcija;
- Automatsko i ručno pomicanje.
Demo |Download
Kamera je dodatak s mnogo prijelaznih efekata i prilagodljivim izgledom. Jednostavan za postavljanje, podržan od strane mobilnih uređaja:
- Potpuno prilagodljiv dizajn;
- Potpisi;
- Mogućnost dodavanja video zapisa;
- 33 različite ikone u boji.
Demo |Download
SlidesJS je responzivni dodatak za JQuery (1.7.1 i noviji) sa podrškom za dodirne uređaje i CSS3 prelaze. Eksperimentirajte s tim, isprobajte nekoliko gotovih primjera koji će vam pomoći da shvatite kako dodati SlidesJS svom projektu:
- Adaptive design;
- CSS3 prijelazi;
- Podrška za uređaje na dodir;
- Jednostavan za postavljanje.
Demo | Skinuti
Ovo je besplatni jQuery klizač:
- Potpuno odzivan - prilagođava se svakom uređaju;
- Horizontalna, vertikalna promjena klizača;
- Slajdovi mogu sadržavati slike, video zapise ili HTML sadržaj;
- Proširena podrška za uređaje na dodir;
- Korištenje CSS prijelaza za animaciju slajdova (hardversko ubrzanje);
- Callback API i potpuno javne metode;
- Mala veličina datoteke;
- Jednostavan za implementaciju.
Demo |Download
Najbolji responzivni klizač. Nova verzija je poboljšana kako bi se povećala brzina i kompaktnost.
Demo | Skinuti
Galleria se koristi na milionima web stranica za kreiranje visokokvalitetnih galerija slika. Broj pozitivnih kritika o njenom radu jednostavno je van ljestvice:
- Potpuno besplatno;
- Način gledanja preko cijelog ekrana;
- 100% prilagodljiv;
- Nije potrebno iskustvo u programiranju;
- Podrška za iPhone, iPad i druge uređaje osjetljive na dodir;
- Flickr, Vimeo, YouTube i još mnogo toga;
- Nekoliko tema.
Demo | Skinuti
Predstavljam vam jQuery klizač slika napisan posebno za responsive web dizajn. Blueberry je eksperimentalni open source dodatak za klizač slika koji je napisan posebno za rad s responzivnim predlošcima:
- Minimalni dizajn;
- Adaptive layout;
- Prezentacije.
Demo | Skinuti
Koriste se standardni elementi prve verzije programa: klizač se sakriva lijevo i iskače udesno. Isti elementi navigacije i natpisi koji se pojavljuju pri prelasku miša:
- Adaptive design;
- Podrška za potpis;
- Način projekcije slajdova.
Demo | Skinuti
1. Odličan jQuery SlideshowVelika, spektakularna dijaprojekcija koja koristi jQuery tehnologije.
2. jQuery dodatak “Scale Carousel”
Skalabilna dijaprojekcija koristeći jQuery. Možete podesiti veličine projekcije slajdova koje vam najviše odgovaraju.
3. jQuery dodatak “slideJS”
Klizač slike sa tekstualnim opisom.
4. Dodatak “JSliderNews”
Kada zadržite pokazivač iznad strelica za navigaciju, pojavljuje se kružna sličica sljedećeg slajda.
6. Lijep jQuery klizač “Prezentacijski ciklus”.
jQuery klizač sa indikatorom učitavanja slike. Omogućena je automatska izmjena klizača.
7. jQuery dodatak “Parallax Slider”
Klizač sa volumetrijskim efektom pozadine. Vrhunac ovog klizača je kretanje pozadine, koja se sastoji od nekoliko slojeva, od kojih se svaki pomiče različitom brzinom. Rezultat je imitacija volumetrijskog efekta. Izgleda veoma lepo, vidite i sami. Efekat se lakše prikazuje u pretraživačima kao što su Opera, Google Chrome, IE.
8. Svježi, lagani jQuery klizač “bxSlider 3.0”
Na demo stranici u odjeljku “primjeri” možete pronaći linkove za sve moguće upotrebe ovog dodatka.
9. jQuery klizač slike, “slideJS” dodatak
Elegantan jQuery klizač sigurno može ukrasiti vaš projekat.
10. jQuery dodatak za slideshow “Easy Slides” v1.1
Jednostavan za korištenje jQuery dodatak za kreiranje slajdova.
11. jQuery Slidy dodatak
Lagani jQuery dodatak u različitim verzijama. Omogućena je automatska izmjena klizača.
12. jQuery CSS galerija sa automatskom promjenom slajdova
Ako posjetitelj ne klikne na strelice “Naprijed” ili “Nazad” unutar određenog vremena, galerija će se automatski pomicati.
13. jQuery klizač “Nivo klizač”
Vrlo profesionalan, kvalitetan, lagan dodatak sa važećim kodom. Na raspolaganju je mnogo različitih efekata prijelaza slajdova.
14. jQuery klizač “MobilySlider”
Fresh slider. jQuery klizač sa raznim efektima za promjenu slike.
15. jQuery dodatak “Slider²”
Lagani klizač sa automatskim izmjenjivačem klizača.
16. Svježi javascript klizač
Klizač sa automatskom promjenom slike.
Dodatak za implementaciju projekcije slajdova sa automatskom izmjenom slajdova. Moguće je kontrolisati prikaz pomoću sličica slika.
jQuery CSS klizač slike pomoću dodatka NivoSlider.
19. jQuery klizač “jShowOff”
Dodatak za rotaciju sadržaja. Tri opcije za korištenje: bez navigacije (sa automatskom promjenom formata slajd šoua), sa navigacijom u obliku dugmadi, sa navigacijom u obliku sličica slika.
20. Dodatak “Shutter Effect Portfolio”.
Svježi jQuery dodatak za dizajniranje portfelja fotografa. Galerija ima zanimljiv efekat mijenjanja slika. Fotografije prate jedna drugu sa efektom sličnim radu zatvarača objektiva.
21. Lagani javascript CSS klizač “TinySlider 2”
Implementacija klizača slike koristeći javascript i CSS.
22. Sjajan klizač “Tinycircleslider”
Moderan okrugli klizač. Prijelaz između slika se vrši povlačenjem klizača u obliku crvenog kruga po obodu. Savršeno će se uklopiti u vašu web stranicu ako u dizajnu koristite okrugle elemente.
23. Klizač slike sa jQuery
Lagani klizač “Slider Kit”. Klizač je dostupan u različitim izvedbama: okomitom i horizontalnom. Implementirane su i različite vrste navigacije između slika: korištenjem tipki “Naprijed” i “Nazad”, pomoću kotačića miša, klikom miša na slajd.
24. Galerija sa minijaturama “Slider Kit”
Galerija "Slider Kit". Pomicanje sličica vrši se i okomito i horizontalno. Prijelaz između slika vrši se pomoću: kotačića miša, klika miša ili prelaska kursora preko sličice.
25. jQuery klizač sadržaja “Slider Kit”
Vertikalni i horizontalni klizač sadržaja koristeći jQuery.
26. jQuery slideshow “Slider Kit”
Slideshow sa automatskom promjenom slajdova.
27. Lagani profesionalni javascript CSS3 klizač
Uredan jQuery i CSS3 klizač kreiran 2011.
jQuery dijaprojekcija sa sličicama.
29. Jednostavna jQuery prezentacija
Slideshow sa navigacijskim gumbima.
30. Sjajan jQuery “Skitter” dijaprojekcija
jQuery Skitter dodatak za kreiranje zadivljujućih dijaprojekcija. Dodatak podržava 22 (!) vrste različitih efekata animacije pri promeni slika. Može raditi s dvije opcije navigacije slajdovima: korištenjem brojeva slajdova i korištenjem sličica. Obavezno pogledajte demo, vrlo kvalitetan nalaz. Korišćene tehnologije: CSS, HTML, jQuery, PHP.
31. Slideshow “Neugodno”
Funkcionalna dijaprojekcija. Slajdovi mogu biti: jednostavne slike, slike sa natpisima, slike sa opisima alata, video zapisi. Za navigaciju možete koristiti strelice, veze sa brojevima slajdova i tipke lijevo/desno na tastaturi. Slide show dolazi u nekoliko verzija: sa i bez sličica. Da vidite sve opcije, pratite linkove Demo #1 - Demo #6 koji se nalaze na vrhu demo stranice.
Vrlo originalan dizajn za klizač slike, koji podsjeća na ventilator. Animirani prijelaz slajda. Navigacija između slika se vrši pomoću strelica. Tu je i automatski pomak koji se može uključiti i isključiti pomoću tipke Play/Pause koja se nalazi na vrhu.
Animirani jQuery klizač. Pozadinske slike se automatski mijenjaju kada se promijeni veličina prozora pretraživača. Za svaku sliku pojavljuje se blok s opisom.
34. Klizač “Flux Slider” koristeći jQuery i CSS3
Novi jQuery klizač. Nekoliko cool animiranih efekata prilikom mijenjanja slajdova.
35. jQuery dodatak “jSwitch”
Animirana jQuery galerija.
Jednostavan jQuery projekcija slajdova sa automatskom promjenom slajdova.
37. Nova verzija dodatka “SlideDeck 1.2.2”
Profesionalni klizač sadržaja. Postoje opcije sa automatskom promjenom slajdova, kao i opcija pomoću kotačića miša za kretanje između slajdova.
38. jQuery klizač “Sudo klizač”
Lagani klizač slika koristeći jQuery. Postoji mnogo opcija implementacije: horizontalna i vertikalna promena slika, sa i bez linkova na broj slajda, sa i bez natpisa slika, razni efekti promene slika. Postoji funkcija automatske promjene klizača. Linkovi za sve primjere implementacije mogu se naći na demo stranici.
39. jQuery CSS3 dijaprojekcija
Slideshow sa sličicama podržava režim automatskog mijenjanja slajdova.
40. jQuery klizač “Flux Slider”
Klizač sa mnogo efekata promene slike.
41. Jednostavan jQuery klizač
Elegantan klizač slika koristeći jQuery.
42. “Craftyslide” jQuery dijaprojekcija
jQuery HTML5 dijaprojekcija koja se proteže cijelom širinom ekrana sa zvukom.
Jednostavna jQuery prezentacija.
Vrijeme ne miruje i sa njim napreduje. To je uticalo i na internet. Već vidite kako se izgled web stranica mijenja, a posebno je popularan adaptivni dizajn. I u tom smislu, pojavilo se dosta novih prilagodljivih jquery klizača, galerija, vrtuljki ili sličnih dodataka.
1. Klizač za horizontalne postove
Prilagodljivi horizontalni vrtuljak s detaljnim uputama za instalaciju. Napravljen je u jednostavnom stilu, ali ga možete stilizirati kako vam odgovara.
2. Klizač na Glide.js
Ovaj klizač je pogodan za bilo koju web stranicu. Koristi Glide.js otvorenog koda. Boje klizača se mogu lako mijenjati.
3. Slideshow sa nagnutim sadržajem
Klizač za responzivni sadržaj. Vrhunac ovog klizača je 3D efekat slika, kao i različite animacije nasumičnog izgleda.
4. Klizač koji koristi HTML5 platno
Vrlo lijep i impresivan klizač sa interaktivnim česticama. Napravljen je korišćenjem HTML5 platna,
5. Klizač za preoblikovanje slike
Klizač sa efektom morfiranja (glatka transformacija iz jednog objekta u drugi). U ovom primjeru, klizač je dobro prikladan za portfolio web programera ili web studija u obliku portfelja.
6. Kružni klizač
Klizač u obliku kruga sa efektom okretanja slike.
7. Klizač sa zamućenom pozadinom
Prilagodljivi klizač sa prebacivanjem i zamućenjem pozadine.
8. Odazivi modni klizač
Jednostavan, lagan i prilagodljiv klizač web stranice.
9. Slicebox - jQuery 3D klizač slike (AŽURIRAN)
Ažurirana verzija klizača Slicebox sa ispravkama i novim funkcijama.
10. Free Animated Responsive Image Grid
JQuery dodatak za kreiranje fleksibilne mreže slika koja će mijenjati snimke koristeći različite animacije i tajminge. Ovo može izgledati dobro kao pozadina ili dekorativni element na web stranici, jer možemo selektivno pojavljivati nove slike i njihove prijelaze. Dodatak dolazi u nekoliko verzija.
11. Flex klizač
Univerzalni besplatni dodatak za vašu web stranicu. Ovaj dodatak dolazi u nekoliko opcija klizača i vrtuljka.
12. Okvir za fotografije
Fotorama je univerzalni dodatak. Ima mnogo postavki, sve radi brzo i jednostavno, a slajdove možete gledati preko cijelog ekrana. Klizač se može koristiti u fiksnoj veličini i prilagodljiv, sa ili bez sličica, sa ili bez kružnog pomicanja i još mnogo toga.
P.S. Instalirao sam klizač nekoliko puta i mislim da je jedan od najboljih
13. Besplatna i prilagodljiva 3D galerija klizača sa sličicama.
Eksperimentalna galerija klizača 3DPanelLayout sa mrežom i zanimljivim efektima animacije.
14. Klizač na css3
Prilagodljivi klizač je napravljen pomoću css3 sa glatkim izgledom sadržaja i svjetlosnom animacijom.
15. WOW klizač
WOW Slider je klizač slika sa neverovatnim vizuelnim efektima.
17. Elastična
Elastični klizač sa punim odzivom i sličicama slajdova.
18. Slit
Ovo je klizač koji reaguje preko celog ekrana koji koristi css3 animaciju. Klizač je napravljen u dvije verzije. Animacija je urađena prilično neobično i lijepo.
19. Prilagodljiva foto galerija plus
Jednostavan besplatni klizač galerije sa učitavanjem slika.
20. Responzivni klizač za WordPress
Prilagodljivi besplatni klizač za WP.
21. Paralaksni klizač sadržaja
Klizač sa efektom paralakse i kontrolom svakog elementa koristeći CSS3.
22. Klizač sa muzičkom vezom
Klizač koji koristi JPlayer otvoreni izvorni kod. Ovaj klizač liči na prezentaciju sa muzikom.
23. Klizač sa jmpress.js
Reaktivni klizač je baziran na jmpress.js i stoga će vam omogućiti da dodate neke zanimljive 3D efekte vašim slajdovima.
24. Fast Hover Slideshow
Slide show sa brzim prebacivanjem slajdova. Klizači se prebacuju na lebdenje.
25. Slika harmonika sa CSS3
Slika harmonike koristeći css3.
26. Dodatak za galeriju optimiziran na dodir
Ovo je prilagodljiva galerija koja je optimizirana za uređaje osjetljive na dodir.
27. 3D galerija
3D zidna galerija - kreirana za pretraživač Safari, gdje će biti vidljiv 3D efekat. Ako ga pogledate na drugom pretraživaču, funkcionalnost će biti u redu, ali 3D efekat neće biti vidljiv.
28. Klizač sa paginacijom
Responzivni klizač sa paginacijom pomoću JQuery UI klizača. Ideja je da se koristi jednostavan koncept navigacije. Moguće je premotavanje svih slika ili slajd po slajd prebacivanje.
29. Montaža slike sa jQuery
Automatski rasporedi slike u zavisnosti od širine ekrana. Vrlo korisna stvar kada se razvija portfolio web stranica.
30. 3D galerija
Jednostavan 3D kružni klizač koji koristi css3 i jQuery.
31. Režim cijelog ekrana sa 3D efektom koristeći css3 i jQuery
Klizač sa mogućnošću pregleda slika preko celog ekrana sa prelepim prelazom.
Jedan od najvećih izazova sa kojima se trenutno suočava zapadna civilizacija je kako prikazati veliku količinu sadržaja na malom prostoru.
Jedno efikasno rešenje je rasporediti sadržaj u sekvencijalne blokove, koristeći ono što je poznato u industriji (i u onlajn zajednici) kao klizač sadržaja. Možda niste čuli za njega, ali sam spreman da se kladim da ste ga sigurno vidjeli.
Kako bismo vam osvježili pamćenje i dali vam ideju o tome šta ćemo kreirati, u nastavku je primjer klizača sadržaja:
U ovom članku ću vam pokazati kako da kreirate svoj prekrasan klizač sadržaja koji je vrlo sličan ovom. Osim kreiranja klizača sadržaja, naučit ćete mnogo o tome kako HTML, CSS i JavaScript međusobno djeluju u kreiranju klizača sadržaja. Sve u svemu, ima mnogo čemu se radovati, pa hajde da počnemo.
Pregledajte kako funkcioniraPrije nego što zaronimo u HTML, CSS i JavaScript koji će biti potrebni da bi sve funkcioniralo, napravimo brzi korak unazad i razumijemo elemente koji čine naš klizač sadržaja.
Prvo, imamo sadržaj koji želimo staviti u klizač:
Sadržaj može biti bilo koji. To mogu biti slike, standardni HTML sadržaj, kombinacija nekoliko vrsta sadržaja itd. Nije bitno. Ako se naš sadržaj može umotati u DIV elemente, u redu smo. Vi samo trebate biti sigurni da je svaki pojedinačni blok sadržaja iste širine i visine.
Kada gledate klizač, istovremeno vidite samo jedan blok sadržaja. Ako se ne preduzmu dodatni koraci, sadržaj koji se istovremeno prikazuje u originalnoj veličini može pretvoriti klizač u nešto vrlo vizualno neprivlačno.
To ćemo popraviti u dva koraka. Prvo ćemo umotati sadržaj u kontejner koji je iste veličine kao i jedan od blokova sadržaja:
Nakon što smo omotali sadržaj u kontejner, šišamo sve elemente oko bloka sadržaja kako bismo osigurali da se istovremeno prikazuje samo jedan blok:
Sljedeći korak je da omogućite pregled ostatka sadržaja. To se može učiniti na različite načine. U ovom članku koristimo skup kružnih veza na koje možete kliknuti:
Posljednja stvar koju trebate učiniti da bi klizač funkcionirao je da svaku vezu učinite kliknutim. Ovo će zahtijevati neke CSS trikove zajedno sa nekim JavaScriptom, ali ništa previše komplikovano. I to je, dragi moji prijatelji i neprijatelji, cijeli kratki pregled od čega se sastoji klizač sadržaja.
U sljedećih nekoliko odjeljaka, pogledat ćemo stvarni HTML, CSS i JavaScript kod koji će pokretati naš klizač.
SadržajSlijedimo iste korake koje smo pokrili u pregledu i počnimo sa... sadržajem. Prvo, moramo stvoriti polaznu tačku. Kreirajmo prazan HTML dokument i dodajmo mu sljedeći kod iz HTML5 početnog predloška:
Ova oznaka ne radi ništa drugo osim definiranja strukture dokumenta, ali je prvi korak koji će nam omogućiti da dodatno dodamo svoj sadržaj. Uradimo to u sljedećem odjeljku.
Sadržaj (stvarni ovaj put)Unutar elementa body dodajte sljedeći HTML kod:
Između oznaka stila dodajte sljedeća pravila stila koja definiraju oblik i boju našeg sadržaja:
#wrapper ( širina: 2200px; pozicija: relativna; lijevo: 0px; ) .content (float: lijevo; širina: 550px; visina: 350px; razmak: normalan; background-repeat: bez ponavljanja; ) #itemOne (pozadina -color: #ADFF2F; background-image: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo ( background-color: #FF7F50; background-image: url("http ://www.kirupa.com/images/yellowSquare.png"); ) #itemThree (boja pozadine: #1E90FF; background-image: url("http://www.kirupa.com/images/pinkSquare.png "); ) #itemFour (boja pozadine: #DC143C; background-image: url("http://www.kirupa.com/images/graySquare.png"); )
Sada kada pogledate stranicu vidjet ćete nešto slično onome što je prikazano na snimku ekrana:
Vidjet ćete četiri velika pravokutna bloka postavljena jedan pored drugog. U zavisnosti od rezolucije ekrana i veličine prozora pretraživača, možda ćete morati da skrolujete malo udesno ili ulevo da vidite sve pravougaonike.
Sada obratite malo pažnje i pokušajte da shvatite zašto vidite ono što vidite. Pregledajte HTML oznake i razumite elemente koji se nalaze u vašem dokumentu.
Obratite pažnju na klasu i id vrijednosti koje se koriste u njoj jer će slijediti pravila stila koji ste dodali. Pogledajte pravila stila i kako njihova vizualizacija utječe na rezultat. Sada da rezimiramo sve.
Šta smo uradiliU našoj HTML oznaci, sadržaj koji vidite sastoji se od četiri elementa div, od kojih svaki sadrži vrijednost klase sadržaja. Ova vrijednost klase dolazi iz pravila stila .content, koje određuje veličinu svakog bloka: 550 piksela širine i 350 piksela visine:
Sadržaj (float: lijevo; širina: 550px; visina: 350px; razmak: normalan; pozadinsko ponavljanje: bez ponavljanja; )
Pravilo stila .content također specificira float vrijednost lijevo. Kao rezultat toga, div elementi su poređani. Posljednja stvar koju ovo pravilo stila deklarira je svojstvo razmaka. Ovo svojstvo određuje kako će tekst u pasusu biti premotan.
Koristio sam ovu nekretninu samo zbog udobnosti. Ako odlučite izaći izvan okvira ovog članka i dodati sadržaj svakom elementu div, bit ćete mi zahvalni jer će vaš tekst biti pravilno umotan, ili uklonite ovo svojstvo (ili ga postavite na drugu vrijednost) ako ne ne želim da vidim njegov.
U ovom trenutku, naš div element je pravilno uklopljen i postavljen. Šteta što je potpuno nevidljiv:
Da bismo riješili ovaj problem, svakom divu dodjeljujemo jedinstveni identifikator kroz id vrijednosti: itemOne, itemTwo, itemThree, anditemFour. U odjeljku stilova imamo četiri stilska pravila koja odgovaraju ovim vrijednostima id-a:
#itemOne ( boja pozadine: #0099CC; background-image: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo ( boja pozadine: #FFCC00; slika pozadine: url("http://www.kirupa.com/images/yellowSquare.png"); ) #itemThree (boja pozadine: #FF6666; background-image: url("http://www.kirupa.com/images /pinkSquare.png"); ) #itemFour (boja pozadine: #E8E8E8; background-image: url("http://www.kirupa.com/images/graySquare.png"); )
Kao što vidite, ova pravila stila definiraju samo boju pozadine i pozadinsku sliku za naš sadržaj. Od sada, divovi više nisu nevidljivi. Prikazuju se kao pravokutnici različitih boja veličine 550 x 350 piksela.
Skoro smo gotovi. Posljednja stvar koju ćemo pogledati je misteriozni div koji sadrži omotač id:
Ovaj element umotava sav naš sadržaj u jedan kontejner. Ovo nije kontejner koji sam imao na umu u recenziji kada sam govorio o rezanju sav sadržaj oko blokova sadržaja.
Ovaj kontejner je dizajniran za nešto malo drugačije. Doslovno samo umotava sadržaj tako da ga možemo vidjeti.
Odgovarajuće pravilo stila #wrapper ispunjava ovaj zadatak:
#wrapper (širina: 2200px; pozicija: relativna; lijevo: 0px; )
Ovo pravilo stila prvo definira širinu elementa omota kao 2200 piksela. To jest, ukupna širina našeg sadržaja... koju dobijete množenjem 4 (brojem div elemenata) sa 550 piksela.
Svojstva pozicije i lijevo namijenjeni su postavljanju mogućnosti premještanja kontejnera na bilo koju lokaciju koju želimo. Postavljanjem svojstva pozicije na relativno, uklanjamo element iz standardne strukture dokumenta i omogućavamo ga postavljanje bilo gdje koristeći vrijednosti piksela u odnosu na mjesto na kojem se trenutno nalazi.
Budući da su naši blokovi sadržaja div podređeni ovom divu, oni se povlače tamo gdje se nalazi roditeljski div. Kao što možete zamisliti, ovo je vrlo zgodno!
Obrezivanje sadržajaU prethodnom dijelu smo se pobrinuli za dobivanje blokova sadržaja koji će biti izlazni. Sljedeća stvar koju ćemo učiniti je smanjiti naš sadržaj tako da u svakom trenutku bude vidljiv samo jedan blok klizača.
Ovdje nam treba glavni kontejner. Zamotajte sve elemente div vašeg HTML koda u div sa id contentContainer:
Samo dodajte dva nova reda i, ako želite, uvlake reda, koje su jednostavno namijenjene da pravilno rasporede HTML kod.
Sada, ako pogledate naš omotani (ponovo) sadržaj, nećete vidjeti ništa novo. Jednostavno pakovanje elemenata u drugi div ne čini ništa značajno, a još manje bilo šta što želimo da uradimo da skratimo sadržaj.
Da biste dodali ovu smislenu radnju, kreirajte sljedeće pravilo stila #contentContainer:
#contentContainer ( širina: 550px; visina: 350px; ivica: 5px crna puna; prelijevanje: skriveno; )
Imajte na umu da veličinu elementa contentContainer postavljate na 550 x 350 piksela. To jest, potpuno iste veličine kao i svaki od blokova sadržaja. Da bi se klizač malo istaknuo, postavili smo crni okvir širine 5 piksela.
Posljednja stvar koju radimo je skraćivanje sadržaja postavljanjem svojstva overflow na hidden . Ovo je za skrivanje svega izvan elementa contentContainer.
Sve zajedno nam daje sledeću sliku u pretraživaču:
Imajte na umu da je sada vidljiv samo sadržaj vašeg prvog bloka. Ostatak sadržaja i dalje postoji, samo je sada sakriven zbog našeg isječkanja preko skrivene vrijednosti za svojstvo overflow.
Navigacijski linkoviPa smo stigli do njih! Bližimo se potpuno funkcionalnom klizaču. U ovom odeljku ćemo se fokusirati na veze za navigaciju – elemente na koje kliknete da biste videli druge blokove sadržaja.
Ove veze nemaju nikakve veze s našim contentContainer-om ili bilo kojim drugim dijelom HTML-a koji već imamo. Morate dodati istaknute linije u HTML kod koji već imamo (ali iznad oznake skripte):
Hajde da na brzinu pogledamo HTML kod koji ste upravo dodali. Prvo, imamo div sa id-om navLinks koji opisuje neuređenu listu. Sami linkovi su predstavljeni kao stavke liste.
Svaki element liste sadrži vrijednost klase itemLinks, kao i prilagođeni atribut data-* koji se zove data-pos . Na ovaj atribut ćemo se vratiti malo kasnije, ali za sada samo primijetite da postoji.
Moramo stilizirati HTML kod koji smo upravo dodali. U odjeljku stilova dodajte sljedeća pravila:
#navLinks ( text-align: center; width: 550px; ) #navLinks ul ( margin: 0px; padding: 0px; display: inline-block; margin-top: 6px; ) #navLinks ul li ( float: left; text- poravnanje: centar; margina: 10px; stil liste: nijedan; kursor: pokazivač; boja pozadine: #CCCCCC; padding: 5px; radijus granice: 50%; granica: crna 5px čvrsta; ) #navLinks ul li:hover ( background-color: #FFFF00; ) #navLinks ul li.active ( background-color: #333333; boja: #FFFFFF; outline-width: 7px; ) #navLinks ul li.active:hover ( background-color: #484848; boja: #FFFFFF; )
Vau, toliko CSS-a. Iako postoji mnogo koda, u njemu nema ničeg stvarno jedinstvenog ili zanimljivog. Deo CSS koda kreira horizontalni meni sa vezama prikazanim jedna pored druge.
Ostatak koda određuje izgled svake veze, kao i njeno odgovarajuće isticanje kada se pređe mišem preko.
Još uvijek se vrijedi zadržati na jednoj tački detaljnije.
To je zbog dva stilska pravila koja se primjenjuju na aktivnu klasu:
#navLinks ul li.active (boja pozadine: #333333; boja: #FFFFFF; širina obrisa: 7px; ) #navLinks ul li.active:hover (boja pozadine: #484848; boja: #FFFFFF; )
Ako se sjećate, u našem HTML kodu nije postojao element koji je imao vrijednost klase active . Bez obzira na to, ova stilska pravila će se i dalje primjenjivati jer se aktivna klasa dodaje u jednu od naših veza dinamički.
Ako vam je sada teško da shvatite sve ovo, ne brinite, vrlo brzo ćemo to detaljno proučiti.
Trenutno naš klizač izgleda ovako:
Ako vaš klizač ne izgleda kako treba, postoji velika šansa da ste pogriješili... ili nešto drugo. Da li se to desilo?
Kreiranje samog klizačaU redu, za sada imamo nešto što izgleda vrlo slično radnom klizaču. Međutim, kada kliknete na bilo koju od veza, apsolutno se ništa ne događa.
Hajde sada da napravimo radni klizač, ali prvo ćemo dodati malo JavaScript-a i neke cool elemente... naime neke lepe CSS prelaze.
Dodavanje JavaScriptaUnutar oznake skripte dodajte sljedeće linije JavaScript koda:
// samo tražimo DOM... kao da tražimo dozvolu od šefa! var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); // activeLink daje oznaku za aktivni element var activeLink = 0; // postavlja praćenje događaja za (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }
Sve što treba da uradimo je da obezbedimo glatku tranziciju umesto nagle promene slajdova.
Dodavanje prijelazaTrenutno imamo klizač sadržaja koji još ne pomera sadržaj glatko. Umjesto toga, slajdovi naglo skaču s jednog na drugi. Da bi se sadržaj lako pomicao, koristimo CSS prijelaz. Dodajmo jedan od mogućih prijelaza našem klizaču.
Pronađite pravilo stila #wrapper i dodajte mu jednu liniju:
Linija koju ste dodali definira prijelaz. Svojstvo navedeno u njemu navodi da se prijelaz treba dogoditi kada se promijeni lijevo svojstvo. Naša tranzicija će se odvijati u trajanju od 0,5 sekundi, a koristit će funkciju za određivanje vremena za ubrzavanje procesa na početku tranzicije i usporavanje na kraju.
Budući da svojstvo tranzicije još uvijek prolazi kroz neke promjene u W3C-u, morat ćete koristiti prefikse kako biste osigurali da bilo koji moderni pretraživač može primijeniti prijelaz. Ako se ne želite baviti ovim, dodajte sljedeću skriptu neposredno prije oznake skripte:
Ne, ova skripta ne radi ništa zlonamjerno. Ovo je hostirana verzija biblioteke Leah Veru bez prefiksa. Umjesto da morate naučiti mnogo o tome kako klizači rade, možete jednostavno preuzeti njenu skriptu, otpremiti je na svoj server i povezati se na svoju verziju.
U svakom slučaju, ako sada pogledate dokument, trebali biste imati radni klizač sadržaja koji glatko prikazuje sadržaj kada kliknete na bilo koju od navigacijskih veza. Ovo bi trebalo biti identično onome što ste vidjeli u primjeru objavljenom na samom početku ovog članka.
Konačno!!!
Parsing kod (i sve ostalo!)Sada kada imamo radni klizač sadržaja, pokušajmo od samog početka da shvatimo kako kod sve to povezuje.
Šta se zaista dešavaKada se klizač sadržaja učita, vidite da se pojavljuje prvi blok sadržaja. Ostatak sadržaja je izrezan i skriven od pogleda:
Klikom na bilo koju vezu prikazuje se odgovarajući blok sadržaja. Klizač zna koliko sadržaja treba prikazati u vidljivom području zahvaljujući bliskom odnosu između svake navigacijske veze i pozicije piksela svakog bloka sadržaja.
Pokušajmo razumjeti ovu vezu. Postoji nekoliko stvari koje znamo. Znamo da je svaki naš blok sadržaja širok 550 piksela. Također znamo da je naš prvi blok sadržaja postavljen horizontalno na 0 piksela.
Kako to znamo? Svi naši blokovi sadržaja omotani su unutar elementa omotača koji obuhvata sav naš sadržaj, a lijevi rub elementa omotača ima poziciju od 0 piksela:
Ovo je deklarirano u pravilu stila #wrapper. Iz ovog pravila stila također znamo da su svi blokovi sadržaja pomaknuti ulijevo i postavljeni u red jedan pored drugog.
Znajući ovo, možemo izračunati pozicije za sve blokove sadržaja na sljedeći način:
Prvi blok se nalazi na 0 piksela. Širina prvog bloka sadržaja je pozicija drugog bloka. To je 550 piksela. Svaki sljedeći blok ima poziciju 550 piksela veću od prethodnog.
Budući da znamo tačnu poziciju piksela svakog bloka sadržaja, možemo koristiti ove informacije da uputimo klizač sadržaja da premjesti element omota na željenu lokaciju tako da dio sadržaja koji želimo bude vidljiv.
Data-pos atribut!Odlično, sada znamo pozicije svih blokova sadržaja. Ono što još nismo pogledali je kako će nam poznavanje položaja piksela bloka sadržaja pomoći da prikažemo željeni blok u prozoru klizača.
Kako možemo odrediti da kada se klikne na vezu, određeni blok sadržaja treba da se prikaže? Samo. Svaka veza sadrži tačnu poziciju (u pikselima) bloka sadržaja kojem odgovara:
Imajte na umu da atribut data-pos ukazuje na svaku od veza, vrijednost svakog od atributa data-pos. One su jednake negativnoj vrijednosti originalne horizontalne pozicije svakog od blokova sadržaja.
Kada kliknemo na vezu, koristi se JavaScript, koji čita data-pos atribut povezan sa tom vezom, a zatim prebacuje vrijednost pozicije piksela našeg elementa omotača na vrijednost koja je pročitana iz atributa.
Na primjer, evo šta se dešava nakon što kliknete na treću vezu:
Treća veza ima vrijednost data-pos od 1100 piksela. Ovo odgovara koliko piksela će školjka kontejnera morati da se pomeri da bi se treći blok sadržaja prikazao u vidljivom području. Klikom na bilo koju drugu vezu postavit ćete svojstvo elementa ljuske na vrijednost sadržanu u atributu data-pos te veze.
U redu, pokrili smo vezu između linkova i pozicioniranja sadržaja o kojoj sam ranije govorio. Sada sve što treba da uradimo je da pogledamo JavaScript, koji će transformisati sve o čemu sam pisao u ovom odeljku u nešto što pretraživač može da razume.
Sve je u JavaScriptuPošto sada imate konceptualno razumijevanje kako sve funkcionira unutar našeg klizača sadržaja, pogledajmo JavaScript, koji implementira sve što znate. Kao što radim u svim svojim člancima, hajde da analiziramo svaki red JavaScript-a i vidimo šta radi za naš klizač.
Počnimo od samog vrha:
var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper");
Varijabla links uzima skup svih elemenata našeg dokumenta koji imaju vrijednost klase itemLinks. Ovi elementi su stavke liste koje djeluju kao veze za navigaciju. Varijabla omota je vrlo slična vezama. Prihvata pokazivač na element sa omotačem identifikatora.
querySelector i querySelectorAllObratite pažnju na to kako postavljam upit za DOM. Umjesto da koristim nešto poput getElementsByClassName ili getElementById, koristim nove funkcije querySelectorAll i querySelector.
Vidjet ćete da ćemo kasnije koristiti obje ove varijable, pa ih imajte na umu.
var activeLink = 0;
Varijabla activeLink se koristi za pohranjivanje pozicije sadržaja koji se trenutno prikazuje. Bolje ćete razumjeti značenje ove varijable kada je malo kasnije objasnim na djelu.
Sljedeći set linija je for petlja:
// postavljanje praćenja događaja za (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }
Ovdje ponavljamo svaki element varijabli veza i dodjeljujemo mu praćenje događaja. Ovaj element za praćenje događaja će pozvati funkciju setClickedItem kada se uhvati događaj klika.
Sljedeća linija uzrokuje brojne promjene:
// postavljanje prvog elementa kao aktivnog links.classList.add("active");
Dodamo vrijednost aktivne klase prvom elementu navigacijske veze. Ovo se radi prosljeđivanjem vrijednosti activeLink nizu veza. Budući da je activeLink 0, niz bi normalno uzimao prvi element i, koristeći classList API, dodao vrijednost aktivne klase.
Nakon što se ovaj red koda izvrši, sjećate li se kada smo obratili pažnju na sljedeća pravila stila?
Pa, sada ova pravila stila dolaze u igru i pomažu da se aktivna navigacijska veza razlikuje od liste ostalih neaktivnih veza. Vratit ćemo se na ova pravila stila malo kasnije i pogledati ih detaljnije.
Sljedeća stvar koju ćemo pogledati je setClickedItem obrađivač događaja, koji se poziva kada se klikne na bilo koju od veza:
funkcija setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Ova funkcija prvo prebacuje stanje svih vaših veza u neaktivne pomoću poziva removeActiveLinks. Ovu funkciju ćemo pogledati malo kasnije.
Druga važna stvar koju ova funkcija radi je da mijenja vrijednost svojstva itemID odabrane stavke u activeLink. Ovo osigurava da activeLink uvijek pokazuje na broj koji odgovara bloku sadržaja koji je trenutno prikazan u klizaču.
Nakon dovršetka ova dva (prilično dosadna) koraka, ova funkcija prosljeđuje referencu na odabrani element funkciji changePosition. Što zauzvrat čini nekoliko nevjerovatnih stvari, o kojima ću govoriti u sljedećem paragrafu.
Ovdje se dešavaju zanimljive promjene! Idemo malo naprijed i pogledajmo funkciju changePosition:
// Rukovalac mijenja položaj klizača nakon što se uvjerimo // da je veza koja nam je potrebna označena kao aktivna. funkcija changePosition(link) (link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; )
Ova funkcija radi dvije stvari:
I. Uključuje vizuelni prikaz odabrane veze kako bi označio da je ona trenutno aktivna.
II. Postavlja položaj elementa ljuske.
Pogledajmo ove dvije stvari detaljnije.
Uključite vizuelni prikaz odabrane/aktivne vezeDa bi vam bilo jasnije o čemu sam ranije govorio, vaše navigacijske veze mogu biti u jednom od dva stanja. Ova stanja imaju za cilj omogućiti korisniku da vidi koji je blok sadržaja trenutno aktivan:
Na ovoj slici možete odmah utvrditi da je blok sadržaja koji odgovara četvrtoj vezi trenutno aktivan, a prve tri veze neaktivne.
Ova vizuelna promena se postiže dodavanjem i uklanjanjem CSS klasa. Aktivna klasa se dodaje aktivnoj vezi. Sve veze koje nisu aktivne ne sadrže aktivnu vrijednost klase. Shvatićete kako ovo funkcioniše kada pogledamo funkciju removeActiveLinks.
U svakom slučaju, sjetit ćete se da smo ranije nazvali sljedeća dva stilska pravila:
#navLinks ul li.active (boja pozadine: #333333; boja: #FFFFFF; širina obrisa: 7px; ) #navLinks ul li.active:hover (boja pozadine: #484848; boja: #FFFFFF; )
U našoj funkciji setClickedItem (takođe poznatoj kao funkcija koja će biti pozvana kada se klikne na vezu), prvo pozivamo removeActiveLinks:
funkcija setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Ova funkcija je odgovorna za uklanjanje aktivne klase za sve navigacijske veze:
funkcija removeActiveLinks() ( za (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
Možete ga zamisliti kao dugme za globalno resetovanje. Iterira kroz navigacijske veze koje su pohranjene u varijabli links i uklanja aktivnu vrijednost klase koristeći classList.remove() . Samo imajte na umu da ako bilo koja od navigacijskih veza sadrži aktivnu vrijednost klase, pa... neće je više biti.
Stoga smo pogledali kako ukloniti aktivnu klasu sa svih vaših veza. Dodavanje klase u skretanje je vrlo jednostavno:
funkcija removeActiveLinks() ( za (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
Isti ClassList koji smo ranije koristili za uklanjanje vrijednosti aktivne klase, koristimo da dodamo vrijednosti aktivne klase natrag na odabranu vezu. Ova odabrana veza prima argument veze koji joj se prosljeđuje.
Podešavanje položaja školjkeSkoro smo gotovi! Nakon svih ovih koraka, konačno dolazimo do funkcije changePosition, koja zapravo postavlja poziciju elementa omotača klizača i prikazuje blok sadržaja koji odgovara linku koji odaberete.
Pogledajmo sljedeći isječak:
funkcija changePosition(link) (link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; )
Varijabla pozicije pohranjuje vrijednost data-pos atributa veze na koju smo kliknuli. Kada dobijemo vrijednost atributa data-pos, postavljamo CSS lijevo svojstvo elementa omotača na istu vrijednost.
Kako se ovo odnosi na implementaciju efekta klizača? Sjećate li se da smo maloprije dodali jedno pravilo #wrapper stilu?
#wrapper (širina: 2200px; pozicija: relativna; lijevo: 0px; prijelaz: lijevo .5s jednostavnog ulaska; )
Imajte na umu da smo definirali prijelaz koji stupa na snagu kada se promijeni lijevo svojstvo. Pogodite šta radi naš JavaScript? Postavlja lijevo svojstvo! CSS prijelaz otkriva ovu promjenu i pokreće sadržaj da se pomjeri. Sve što vam je potrebno da sve ovo funkcionira je da dodate jedan red JavaScripta.
Ne znam za vas, ali meni je to prosto neverovatno. Ovo je nešto što nismo mogli zamisliti prije nekoliko godina kada smo morali uložiti mnogo truda i napisati kod kako bismo se nosili s efektom klizača. To je ono što naš klizač sadržaja čini lijepim.
Upravo tako, napravili smo klizač sadržaja od nule i (što je još važnije) naučili kako on funkcionira.
Poboljšanje klizača sadržajaKlizač sadržaja koji smo upravo kreirali je prilično kul, ali možemo ga učiniti još hladnijim. U ovom odeljku ćemo pogledati dva poboljšanja koja bi vam mogla biti korisna. Usput ćemo naučiti neke nove JavaScript i CSS trikove. Biće, kako mladi sada kažu: "Plačem!"
Pomicanje s translate3d transformacijomTrenutno se naši slajdovi pomiču promjenom vrijednosti CSS lijevog svojstva koje se primjenjuje na element div omotača. Korištenjem lijevog svojstva činimo da klizač funkcionira, ali ova metoda ima ozbiljne nedostatke. Ne možete koristiti hardversko ubrzanje da biste osigurali glatke prijelaze slajdova.
Ovo se posebno odnosi na mobilne uređaje koji često koriste hardver sa niskim brzinama internetske veze, a tu povremene, skokovite promjene slajdova mogu biti posebno uočljive.
Ovo se može popraviti pomoću funkcije translate3d transform, koja će omogućiti da se slajdovi glatko kreću. Ova funkcija uzima vrijednosti x, y i z kao argumente, a promjena bilo koje od ovih vrijednosti će promijeniti poziciju ciljnog elementa.
Posebna karakteristika ove funkcije je da kao rezultat njene upotrebe hardver pretraživača ubrzava promjenu položaja. sta cekamo?
Prva stvar koju treba da uradimo je da promenimo pravilo stila #wrapper. Zamijenite deklaraciju pozicije i lijevih svojstava sljedećim kodom:
Dakle, transformacija postavlja početnu poziciju elementa ljuske.
Prva faza: Dodavanje pomoćnih elemenataU prvom koraku dodajemo sljedeći pomoćni kod ispod glavnog koda koji trenutno imamo:
// // Korištenje transformacija // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(transforms); // funkcija upravljanja prefiksima dobavljača getSupportedPropertyName(properties) ( for (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }
Ovaj kod će nam pomoći da postavimo svojstvo transformacije koristeći prefikse dobavljača tako da ga podržava što više pretraživača.
U ovom članku neću objašnjavati ove redove. Jedina stvar koju trebate znati je da sav ovaj kod pomaže da se Property postavi na transform , msTransform , mozTransform ili oTransform . U zavisnosti od toga koliko je star pretraživač koji koristite, koristiće se jedna od ovih vrednosti.
Druga faza: predstavljanje Ahoy!U funkciji changePosition pronađite sljedeće linije koda:
funkcija changePosition(link) (var position = link.getAttribute("data-pos"); wrapper.style.left = position; link.classList.add("active"); )
Zamijenite ih sljedećim kodom:
funkcija changePosition(link) ( var position = link.getAttribute("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}
Ovaj kod radi neke prilično jednostavne stvari. Varijabla translateValue stvara prikaz funkcije translate3d zasnovan na stringovima u kojoj je X dio ispunjen vrijednošću varijable pozicije. Jednom kada je ovaj niz kreiran, sve što treba da uradimo je da ga prosledimo objektu stila elementa omotača.
Imajte na umu da definicijom odgovarajućeg svojstva stila upravlja varijabla transformProperty, koju smo pogledali malo ranije.
Ako sada pogledate dokument, vidjet ćete da blokovi sadržaja u klizaču skaču s jednog mjesta na drugo.
Očigledno, ovo nije ono što ste očekivali da vidite. Šta se desilo sa glatkim kretanjem? Odgovor je da nam nedostaje još jedna promjena. Na sreću, ovo je lako popraviti. Ako se vratimo na pravilo stila #wrapper, primijetit ćemo da deklaracija prijelaza izgleda ovako:
#wrapper (širina: 2200px; transform: translate3d(0, 0, 0); prijelaz: lijevo .5s jednostavnog ulaska; )
Naš prijelaz prati promjene lijevog svojstva. Više ne koristimo ovo svojstvo, tako da naša tranzicija ne može početi s radom. Da biste ispravili ovu strašnu nepravdu, zamijenite ključnu riječ lijevog svojstva unutar deklaracije prijelaza ključnom riječi transformacije:
#wrapper ( širina: 2200px; transform: translate3d(0, 0, 0); prijelaz: transformacija .5s jednostavnog ulaska; )
Nakon što izvršite ove promjene, naš klizač će ponovo raditi na isti način kao i prije.
Jedina razlika je u tome što mijenjanje slajdova sada koristi hardversko ubrzanje i sada će se odvijati lakše i biti podržano na više uređaja.
Automatska promjena klizača u intervalima od nekoliko sekundiTrenutno se naši slajdovi mijenjaju samo kada kliknemo na jednu od navigacijskih veza. Ali ovo nije jedini način na koji klizač funkcionira. Mnogi klizači sadržaja automatski se pomiču kroz sadržaj svakih nekoliko sekundi, a postoji i opcija za skok na određeni odjeljak pomoću navigacijskih veza.
U nastavku možete vidjeti primjer jednog takvog klizača sadržaja:
Da, ovo je naš stari klizač sa nekim manjim izmjenama kako bi se omogućilo automatsko pomicanje sadržaja unutar kontejnera. Pogodi šta ćemo dalje?
Učinimo da se slajdovi automatski pomiču!U tome će nam pomoći funkcija setInterval. Glavni zadatak ove funkcije je osigurati da se kod izvršava u redovnim intervalima:
window.setInterval(functionToCall, kašnjenje);
Svakih nekoliko sekundi (ili bilo šta što postavite kao vrijednost intervala), funkcija setInterval govori našem klizaču da se pomakne na sljedeći blok sadržaja.
Kada se sadržaj završi, klizač prolazi kroz petlju do početka sadržaja i počinje iznova. Ovo se radi prilično lako. Sve što trebate učiniti je znati nekoliko trikova i imati jasno razumijevanje kako vaš klizač sadržaja funkcionira.
Prva promjena koju trebamo napraviti je da dodamo dodatni kod potreban da bismo obavili posao. Na kraju koda koji već imate, dodajte sljedeće redove:
// // Kod za automatsku promjenu slajdova // var timeoutID; funkcija startTimer() ( // pričekajte 2 sekunde prije pozivanja goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funkcija goToNextItem() (ukloni ActiveLinks(); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }
Uskoro ćemo pogledati šta znači sav ovaj kod. Sada dodajte sve. Kada to učinite, pogledajte klizač sadržaja u vašem pretraživaču. Vidjet ćete da se slajdovi sadržaja mijenjaju u kontejneru svake dvije sekunde.
Ostala nam je još samo jedna značajna promjena. Trenutno se slajdovi rotiraju svake dvije sekunde, bez obzira da li kliknete na vezu za navigaciju ili ne.
Ispravan način da se to uradi je da se tajmer resetuje na 0 kada se klikne na jednu od veza. Da izvršite ovu promjenu, dodajte sljedeći red koda u setClickedItem rukovaocu događaja:
Klizač sadržaja će se tada ponašati kako se očekuje kada intervenišete i kliknete na vezu za navigaciju. Ura!
Objašnjenje automatske promjene slajdovaDakle, ostaje nam samo jedna stvar da shvatimo. Hajde da na brzinu pogledamo kod koji smo upravo dodali i shvatimo zašto radi to što radi.
Počnimo s funkcijom goToNextItem/span>:
funkcija goToNextItem() (ukloni ActiveLinks(); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}
Ova funkcija je odgovorna za praćenje sadržaja koji se trenutno prikazuje i onoga što će uslijediti. Da biste bolje razumjeli šta se događa, pogledajte sliku ispod:
Varijabla activeLink ukazuje na poziciju trenutno prikazanog bloka sadržaja. Svaka informacija je povezana sa odgovarajućim elementom unutar niza veza.
Ukupan broj elemenata unutar niza veza može se postaviti putem svojstva dužine. Sada se vratimo na naš kod.
Naredba if funkcije goToNextItem jednostavno provjerava da li je još uvijek ostalo sadržaja ili bi se klizač trebao vratiti na početak:
if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; }
Ako pažljivo pogledate dijagram i kod, razumjet ćete logiku. U osnovi, kada imamo ispravnu vrijednost za activeLink , sve ostalo u našem klizaču će raditi kao magija.
Sama magija se izvodi pomoću sljedeće dvije linije koje pruža funkcija changePosition, koja se zauzvrat poziva s pokazivačem na sljedeći blok sadržaja za izlaz:
var newLink = veze; changePosition(newLink);
U ovom trenutku, način na koji se naš kod obrađuje ne razlikuje se od načina na koji je obrađen kada je link kliknut ručno.
Dakle... pogledali smo kod u funkciji goToNextItem da bismo prešli na sljedeći dio sadržaja. Za pozivanje ovog slajda automatski se koriste sljedeće linije:
var timeoutID; funkcija startTimer() ( // pričekajte 2 sekunde prije pozivanja goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funkcija resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
Za početak se koristi funkcija startTimer. Ova funkcija sadrži poziv setInterval koji osigurava da se funkcija goToNextItem poziva svake 2 sekunde (ili 2000 milisekundi).
Jednostavno dodavanje ove funkcije (i njeno pozivanje) će uzrokovati da vaš klizač sadržaja počne automatski pomicati blokove sadržaja.
Jedina stvar koju treba shvatiti je kako se tajmer (koji sam nazvao setInterval) resetuje kada ručno kliknete na vezu. Za rješavanje ovoga koristi se preostali kod koji imamo.
Metoda kojom se tajmer resetuje je zaustavljanje funkcije setInterval i njeno ponovno pokretanje. Kako se to radi može biti malo teško shvatiti.
Pohranjujemo identifikator funkcije setInterval koja se poziva, a zatim koristimo isti identifikator da bismo kasnije prestali pozivati istu funkciju setInterval. Da razjasnim.
Ovaj identifikator pohranjujemo u varijablu timeoutID i inicijaliziramo ga u pozivu startTimer, a zgodno je koristiti ovaj isti identifikator unutar funkcije resetTimer:
funkcija resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
ClearInterval funkcija uzima ID (preko timeoutID) funkcije setInterval koju želimo zaustaviti.
Nakon što smo zaustavili tajmer unutar funkcije resetTimer, pozivamo startTimer i pokrećemo ga iznova:
funkcija resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
Logika je jednostavna. Tajmer se zaustavlja kada ručno odaberete koji blok sadržaja želite prikazati na klizaču:
funkcija setClickedItem(e) ( removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Nakon što odaberete novi blok sadržaja, klizač se zaustavlja dvije sekunde prije nego što pređe na sljedeći blok. Funkcije startTimer i resetTimer prate sve ovo.
ZaključakTo je to, pogledali smo kako napraviti prekrasan klizač sadržaja koristeći samo
HTML CSSi JavaScript. Također ste naučili kako postaviti neke promjene za poboljšanje performansi i omogućiti automatske promjene bloka sadržaja.
Iako sam klizač nije definiran puno koda, razumijevanje koncepata iza njega vjerovatno će vam trebati neko vrijeme. U članak sam uključio linkove na druge izvore koji pokrivaju teme koje sam dotakao samo površno. Možete ih pročitati kada za to budete imali vremena.
Klizači sadržaja dolaze u različitim oblicima i veličinama. Neki se sastoje od nekoliko nivoa, gde se sadržaj može menjati i vertikalno i horizontalno.
Neki klizači sadrže vertikalno poravnat sadržaj s blokovima naslaganim jedan na drugi. Ako ste prilično proaktivni i želite koristiti CSS umjesto tranzicije
Dozvolite mi da počnem tako što ću reći da je ovaj članak napisan da govori o tome kako kreirati klizač za pomicanje slika za web stranice. Ovaj članak ni na koji način nije obrazovne prirode, on samo služi kao primjer kako se naš predmet razmatranja može implementirati. Kôd koji je dat u ovom članku možete koristiti kao svojevrsni predložak za sličan razvoj; nadam se da ću čitatelju moći prenijeti suštinu onoga što sam napisao dovoljno detaljno i na pristupačan način.
A sada do točke, ne tako davno sam trebao instalirati klizač na jednu stranicu, ali nakon pretraživanja interneta za gotovim skriptama, nisam našao ništa korisno, jer neki nisu radili kako mi je trebalo, dok drugi uopšte nisu startovali bez grešaka u konzoli. Činilo mi se previše nezanimljivo koristiti jQuery dodatke za klizač, jer... Iako će ovo riješiti problem, neću imati nikakvog razumijevanja kako ovaj mehanizam funkcionira, a korištenje dodatka za samo jedan klizač nije baš optimalno. Takođe mi se nije baš dalo da razumem krive skripte, pa sam odlučio da napišem sopstvenu skriptu za klizač, koju bih sam označio po potrebi.
Prvo treba da se odlučimo za logiku samog klizača, a zatim pređemo na implementaciju.U ovoj fazi je veoma važno jasno razumevanje rada ovog mehanizma, jer bez njega ne možemo napisati kod koji radi tačno onako kako mi željeti.
Naš glavni objekt će biti viewport, odnosno blok u kojem ćemo vidjeti kako se naše slike okreću, u njemu ćemo imati slidewrapper, to će biti naš blok koji će sadržavati sve slike poređane u jednu liniju i koji će se mijenjati svoju poziciju unutar samog prozora za prikaz. 
Zatim, na stranama unutar prozora za prikaz, okomito u sredini, bit će dugmad za nazad i naprijed, kada kliknemo također ćemo promijeniti poziciju našeg slidewrapper-a u odnosu na okvir za prikaz, čime ćemo uzrokovati efekat pomicanja kroz slike. I na kraju, posljednji objekt će biti naši navigacijski gumbi, smješteni na dnu prozora za prikaz. 
Kada kliknemo na njih, jednostavno ćemo pogledati serijski broj ovog dugmeta i premjestiti ga na slajd koji nam je potreban, opet pomicanjem slidewrapper-a (pomak će se izvršiti promjenom svojstva transform css, čija će vrijednost biti stalno izračunava).
Mislim da bi logika kako cijela ova stvar funkcionira trebala biti jasna nakon onoga što sam gore naveo, ali ako negdje ipak dođe do nesporazuma, onda će sve postati jasnije u kodu ispod, samo trebate malo strpljenja.
A sad da pišemo! Prije svega, otvorimo našu indeksnu datoteku i tamo upišemo oznaku koja nam je potrebna:
Kao što vidite, nema ništa komplikovano, blok-za-klizač služi samo kao blok u koji će biti postavljen naš klizač, unutar njega je sam viewport, u kojem se nalazi naš slajdwrapper, takođe ugniježđena lista, ovdje su slajdovi, a img su slike unutar njih. Obratite pažnju na to da sve slike moraju biti iste veličine ili barem proporcija, inače će klizač izgledati krivo, jer njegove dimenzije direktno ovise o proporcijama slike.
Sada treba da stilizujemo celu stvar, obično se stilovi ne komentarišu posebno, ali sam odlučio da ipak skrenem pažnju na to kako ubuduće ne bi bilo nesporazuma.
tijelo ( margina: 0; padding: 0; ) #block-for-slider (širina: 800px; margina: 0 auto; margin-top: 100px; ) #viewport ( širina: 100%; prikaz: tablica; pozicija: relativna; overflow: skriven; -webkit-user-select: nema; -moz-user-select: nema; -ms-user-select: nema; -o-user-select: nema; user-select: nema; ) #slidewrapper ( pozicija: relativna; širina: kalc(100% * 4); vrh: 0; lijevo: 0; margina: 0; padding: 0; -webkit-prijelaz: 1s; -o-prijelaz: 1s; prijelaz: 1s; -webkit -funkcija vremena-prijelaza: jednostavno ulazak; -o-funkcija-vremena-prijelaza: jednostavnost-u-izlaz; funkcija-vremenska-prijelaza: jednostavnost-u-izlaz; ) #slidewrapper ul, #slidewrapper li ( margina : 0; padding: 0; ) #slidewrapper li (širina: calc(100%/4); stil liste: nijedan; display: inline; float: lijevo; ) .slide-img (širina: 100%; )
Počnimo sa blok-za-klizača, ovo je opet naš blok na stranici, koji ćemo dodijeliti za klizač, njegova visina će ovisiti o širini i proporcijama naše slike, jer viewport zauzima cijelu širinu block-for-slider , tada i sam slajd ima istu širinu i, shodno tome, slika unutar njega mijenja svoju visinu ovisno o širini (proporcije su očuvane). Postavio sam ovaj element na svoju stranicu vodoravno u sredinu, sa 100px uvučenim od vrha, čineći njegovu poziciju pogodnijom za primjer.
Element viewporta, kao što je već spomenuto, zauzima cijelu širinu našeg blok-za-klizača, ima svojstvo overflow:hidden, što će nam omogućiti da sakrijemo naš feed slike, koji se proteže izvan okvira prikaza. 
Sljedeće CSS svojstvo je user-select:none , koje vam omogućava da se riješite plavog isticanja pojedinačnih elemenata klizača kada kliknete na dugmad više puta.
Prelazimo na omotač slajdova, zašto položaj: relativan, a ne apsolutan? Sve je veoma jednostavno, jer... ako odaberemo drugu opciju, tada nam se sa svojstvom viewporta overflow:hidden neće pojaviti apsolutno ništa, jer sam okvir za prikaz neće se prilagoditi visini omotača slajdova, zbog čega će imati visinu:0 . Zašto je širina bitna i zašto je uopće postavljamo? Poenta je da će naši slajdovi imati širinu jednaku 100% prozora za prikaz, a da bismo ih poravnali potrebno nam je mjesto gdje će stajati, tako da širina slajdova treba da bude jednaka 100% širine prozora za prikaz pomnoženo sa brojem slajdova (u mom slučaju, 4). Što se tiče funkcije prijelaza i vremena prijelaza, ovdje 1s znači da će se promjena položaja omotača slajdova dogoditi u roku od 1 sekunde i mi ćemo je promatrati, a ease-in-out je vrsta animacije u kojoj prvo ide polako i ubrzava do sredine, a zatim ponovo usporava, ovdje možete podesiti vrijednosti po vlastitom nahođenju.
Sljedeći blok svojstava postavlja omotač slajdova i njegove djece da imaju nulti padding, ovdje nisu potrebni komentari.
Zatim stiliziramo naše slajdove, njihova širina bi trebala biti jednaka širini okvira za prikaz, ali pošto... oni su u premotaču slajdova čija je širina jednaka širini prozora za prikaz pomnoženoj sa brojem slajdova, a zatim da ponovo dobijemo širinu prozora za prikaz, moramo 100% širine omotača slajdova podeliti sa brojem slajdova (u mom slučaju, opet, od 4). Zatim ćemo ih pretvoriti u inline elemente koristeći display:inline i postaviti float na lijevo dodavanjem svojstva float:left. O list-style:none Mogu reći da ga koristim da uklonim zadani marker iz li , u većini slučajeva to je neka vrsta standarda.
Sa slide-img sve je jednostavno, slika će zauzeti cijelu širinu slajda, slajd će se prilagoditi svojoj visini, slidewrapper će se prilagoditi visini slajda, a visina prozora za prikaz će zauzvrat uzeti vrijednost visine slidewrapper-a, tako da će visina našeg klizača zavisiti od proporcija slike i veličine bloka, predviđenih za klizač, o čemu sam već pisao iznad.
Mislim da smo u ovom trenutku shvatili stilove, hajde da za sada napravimo jednostavnu projekciju slajdova bez dugmadi, a nakon što se uverimo da radi kako treba, dodaćemo ih i stilizovati.
Otvorimo našu js datoteku, koja će sadržavati kod klizača, ne zaboravite povezati jQuery, jer Pisaćemo koristeći ovaj okvir. Inače, u vrijeme pisanja ovog članka koristim jQuery verziju 3.1.0. Datoteka sa samom skriptom mora biti uključena na samom kraju oznake tijela, jer radit ćemo sa DOM elementima koje je potrebno prvo inicijalizirati.
Za sada moramo deklarirati nekoliko varijabli, jedna će pohraniti broj slajda koji vidimo u određenom trenutku u prozoru za prikaz, ja sam ga nazvao slideNow, a druga će pohraniti broj tih istih slajdova, ovo je slideCount .
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
Varijablu slideNow treba postaviti na početnu vrijednost 1 jer Kada se stranica učita, na osnovu naše oznake, vidjet ćemo prvi slajd u prozoru za prikaz.
U slideCount ćemo postaviti broj podređenih elemenata slidewrapper-a, ovdje je sve logično.
Zatim morate kreirati funkciju koja će biti odgovorna za prebacivanje slajdova s desna na lijevo, hajde da je proglasimo:
funkcija nextSlide() ( )
Pozvat ćemo ga u glavnom bloku našeg koda, do čega ćemo doći kasnije, ali za sada ćemo našoj funkciji reći šta treba da radi:
funkcija nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )
Prvo, provjeravamo da li smo trenutno na zadnjem slajdu našeg feeda? Da bismo to učinili, uzimamo broj svih naših slajdova koristeći $("#slidewrapper").children().length i provjerimo ga brojem našeg slajda, ako su jednaki, to znači da moramo početi prikazivati feed ponovo, sa 1 slajda, što znači da mijenjamo svojstvo CSS transformacije slajdwrapper-a u translate(0, 0) i na taj način ga pomičemo u prvobitni položaj tako da je prvi slajd u našem vidnom polju, ne zaboravimo about –webkit i –ms za adekvatan prikaz među pretraživačima (pogledajte referencu .css svojstava). Nakon ovoga, ne zaboravite da ažurirate vrijednost varijable slideNow, govoreći joj da je slajd broj 1 na vidiku: slideNow = 1;
Isti uslov uključuje i provjeru da je broj slajda koji vidimo unutar broja naših slajdova, ali ako to nekako nije ispunjeno, vraćamo se ponovo na 1. slajd.
Ako prvi uslov nije ispunjen, to znači da trenutno nismo ni na posljednjem slajdu niti na nekom nepostojećem, što znači da moramo preći na sljedeći, to ćemo učiniti pomicanjem slidewrapper-a ulijevo za vrijednost koja je jednaka širini okvira za prikaz, pomak će se ponovo dogoditi kroz poznato svojstvo translate, čija će vrijednost biti jednaka "translate(" + translateWidth + "px, 0)" , gdje je translateWidth udaljenost za koju je naš slidewrapper je pomaknut. Usput, hajde da deklarišemo ovu varijablu na početku našeg koda:
var translateWidth = 0;
Nakon prelaska na sljedeći slajd, recimo našem slideNow da vidimo sljedeći slajd: slideNow++;
U ovom trenutku, neki čitaoci se možda pitaju: zašto nismo zamenili $("#viewport").width() nekom promenljivom kao što je slideWidth da uvek imamo pri ruci širinu našeg slajda? Odgovor je vrlo jednostavan, ako je naša stranica prilagodljiva, onda je, u skladu s tim, i blok koji je dodijeljen za klizač također prilagodljiv, na osnovu toga možemo razumjeti da pri promjeni veličine širine prozora bez ponovnog učitavanja stranice (na primjer, uključivanjem telefona njegova strana), širina prozora za prikaz će se promijeniti i, shodno tome, širina jednog slajda će se promijeniti. U ovom slučaju, naš slidewrapper će biti pomaknut na vrijednost širine koja je prvobitno bila, što znači da će slike biti prikazane u dijelovima ili uopće neće biti prikazane u prozoru za prikaz. Pisanjem $("#viewport").width() umjesto slideWidth u našu funkciju, prisiljavamo je da izračuna širinu okvira za prikaz svaki put kada mijenjamo slajdove, čime osiguravamo da kada se širina ekrana naglo promijeni, skroluje do slajd koji nam je potreban.
Međutim, napisali smo funkciju, sada je trebamo pozvati nakon određenog vremenskog intervala, također možemo pohraniti interval u varijablu tako da ako želimo da je promijenimo možemo promijeniti samo jednu vrijednost u kodu:
var slideInterval = 2000;
Vrijeme u js je naznačeno u milisekundama.
Sada napišimo sljedeću konstrukciju:
$(document).ready(function () (setInterval(nextSlide, slideInterval); ));
Ovdje sve ne može biti jednostavnije; kroz $(document).ready(function () ()) konstrukciju kažemo da se sljedeće radnje moraju izvršiti nakon što se dokument u potpunosti učita. Zatim jednostavno pozivamo funkciju nextSlide s intervalom jednakim slideInterval koristeći ugrađenu funkciju setInterval.
Nakon svih gore navedenih koraka, naš klizač bi se trebao vrtjeti savršeno, ali ako nešto krene po zlu, onda problem može biti ili u verziji jQueryja ili u pogrešnom povezivanju bilo kojeg fajla. Također ne treba isključiti da ste mogli napraviti grešku negdje u kodu, pa vam mogu samo savjetovati da sve provjerite još jednom. 
U međuvremenu, idemo dalje, dodajmo na naš klizač funkciju kao što je zaustavljanje pomicanja prilikom pomeranja kursora. Da bismo to uradili, potrebno je da upišemo sledeću stvar u glavni blok koda (unutar $(document).ready( funkcija () ()) struktura:
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
Da bismo počeli analizirati ovaj kod, moramo znati šta je switchInterval. Prvo, ovo je varijabla koja pohranjuje periodični poziv funkcije nextSlide, jednostavno rečeno, imamo ovu liniju koda: setInterval(nextSlide, slideInterval); , pretvorio u ovo: switchInterval = setInterval(nextSlide, slideInterval); . Nakon ovih manipulacija, naš glavni blok koda je dobio sljedeći oblik:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval); )); ));
Ovdje koristim lebdeći događaj, što znači “on hover”, ovaj događaj mi omogućava da pratim trenutak kada pređem kursorom preko objekta, u ovom slučaju prozora za prikaz.
Nakon lebdenja, brišem interval, koji označavam u zagradama (ovo je naš switchInterval ), zatim, odvojeno zarezima, napišem šta ću uraditi kada pomerim kursor nazad, u ovom bloku ponovo dodeljujem naš switchInterval periodičnom poziv na funkciju nextSlide.
Sada, ako testiramo, možemo vidjeti kako naš klizač reagira na lebdenje, zaustavljajući slajd da se prebaci.
Sada je vrijeme da dodate dugmad na naš klizač, počnimo s dugmadima naprijed i nazad.
Prije svega, označimo ih:
U početku, ova oznaka može biti nerazumljiva, odmah ću reći da sam ova dva dugmeta umotao u jedan div sa klasom prev-next-btns samo radi vaše udobnosti, ne morate to da radite, rezultat neće promijenimo, sad ćemo im dodati stilove i sve će biti u redu Jasno je:
#prev-btn, #next-btn (pozicija: apsolutna; širina: 50px; visina: 50px; boja pozadine: #fff; radijus granice: 50%; vrh: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( kursor: pokazivač; ) #prev-btn (lijevo: 20px; ) #next-btn (desno: 20px; )
Prvo, pozicioniramo naše dugmad koristeći position:apsolute, čime slobodno kontrolišemo njihov položaj unutar našeg okvira za prikaz, zatim ćemo odrediti veličine ovih dugmadi i koristiti radijus granice da zaokružimo uglove tako da se ovi dugmići pretvaraju u krugove. Njihova boja će biti bijela, odnosno #fff , a njihov pomak od gornje ivice prozora za prikaz će biti jednak polovini visine ovog prozora minus polovini visine samog dugmeta (u mom slučaju 25px), tako da možemo postavite ih okomito u centar. Zatim ćemo navesti da kada pređemo mišem preko njih, naš kursor će se promijeniti u pokazivač, a na kraju ćemo našim gumbima pojedinačno reći da trebaju biti 20px udaljeni od svojih rubova kako bismo ih mogli vidjeti na način koji nam odgovara .
Opet, možete stilizirati elemente stranice onako kako želite, ja samo dajem primjer stilova koje sam odlučio koristiti.
Nakon stiliziranja, naš klizač bi trebao izgledati otprilike ovako: 
Zatim idite ponovo na našu js datoteku, gdje ćemo opisati rad naših dugmadi. Pa, dodajmo još jednu funkciju, ona će nam pokazati prethodni slajd:
funkcija prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ) )
Zove se prevSlide i biće pozvan samo kada se klikne na prev-btn. Prvo provjeravamo da li se nalazimo na 1. slajdu ili ne, ovdje također provjeravamo da li je naš slajdNow izašao izvan stvarnog raspona naših slajdova i, ako je bilo koji od uslova tačan, preći ćemo na zadnji slajd, pomjerajući omotač slajdova na vrednost koja nam je potrebna. Ovu vrijednost ćemo izračunati pomoću formule: (širina jednog slajda) * (broj slajdova - 1), sve ovo uzimamo sa predznakom minus, jer pomerimo ga ulevo, ispostavilo se da će nam prozor za prikaz sada pokazati poslednji slajd. Na kraju ovog bloka, također trebamo reći varijabli slideNow da je posljednji slajd sada u našem pogledu.
Ako nismo na prvom slajdu, potrebno je da se vratimo za 1, za ovo ponovo menjamo svojstvo transformacije slidewrapper-a. Formula je: (širina jednog slajda) * (broj trenutnog slajda - 2), opet, sve ovo uzimamo sa znakom minus. Ali zašto -2, a ne -1, trebamo li pomaknuti samo 1 slajd unazad? Činjenica je da ako smo, recimo, na 2. slajdu, onda je varijabla x svojstva transform:translate(x,0) našeg slidewrapper-a već jednaka širini jednog slajda, ako mu kažemo da nam je potrebno da oduzmemo 1 od broja trenutnog slajda, onda ćemo opet dobiti jedan, za koji je omotač slajdova već pomaknut, tako da ćemo morati pomaknuti ove iste širine prozora za prikaz za 0, što znači na slideNow - 2.
Sada samo trebamo dodati ove linije glavnom bloku koda:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() (prevSlide(); ));
Ovdje jednostavno pratimo da li su naši gumbi kliknuli, a u ovom slučaju pozivamo funkcije koje su nam potrebne, sve je jednostavno i logično.
Sada dodajmo dugmad za navigaciju slajdova i vratimo se ponovo na oznake:
Kao što vidite, unutar prozora za prikaz pojavila se ugniježđena lista, dajmo joj identifikator nav-btns , unutar nje su naši navigacijski gumbi, dodijelit ćemo im klasu slide-nav-btn , međutim, možemo završiti sa oznake, idemo na stilove:
#nav-btns ( pozicija: apsolutna; širina: 100%; dno: 20px; padding: 0; margina: 0; text-align: centar; ) .slide-nav-btn ( pozicija: relativna; prikaz: inline-block; stil liste: nijedan; širina: 20px; visina: 20px; boja pozadine: #fff; radijus granice: 50%; margina: 3px; ) .slide-nav-btn:hover (kursor: pokazivač; )
Nav-btns bloku, u kojem se nalaze naši gumbi, dajemo svojstvo position:apsolute tako da ne rasteže okvir za prikaz po visini, jer slidewrapper ima svojstvo position:relative, postavljamo širinu na 100% kako bismo centrirali dugmad vodoravno u odnosu na okvir za prikaz koristeći text-align:center, a zatim pomoću svojstva bottom dajemo do znanja našem bloku da bi trebao biti na udaljenosti od 20px od donje ivice.
Sa dugmadima radimo isto što i sa slajdovima, ali sada im dajemo display:inline-block , jer sa display:inline ne reaguju na širinu i visinu jer nalaze se u apsolutno pozicioniranom bloku. Učinimo ih bijelim i, koristeći već poznatu granicu-radijus, damo im oblik kruga. Kada pređemo preko njih, promijenit ćemo izgled našeg kursora za uobičajeni prikaz.
Hajdemo sada na jQuery dio:
Prvo, deklarirajmo varijablu navBtnId, koja će pohraniti indeks gumba na koji smo kliknuli:
var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );
Ovdje, kada kliknemo na naš slide-nav-btn, pozivamo funkciju koja varijabli navBtnId prije svega dodjeljuje indeks kliknutog dugmeta, odnosno njegov serijski broj, pošto odbrojavanje počinje od nule, onda ako kliknemo na drugo dugme, tada se upisuje na navBtnId vrijednost 1. Zatim radimo provjeru gdje dodamo jedan na serijski broj dugmeta da dobijemo broj kao da je odbrojavanje počelo ne od 0, već od 1, mi uporedite ovaj broj sa brojem trenutnog slajda, ako se poklapaju, tada nećemo preduzimati nikakve radnje, jer je željeni slajd već u prozoru za prikaz.
Ako slajd koji nam treba nije u vidnom polju polja za prikaz, tada izračunavamo udaljenost za koju trebamo pomaknuti omotač slajdova ulijevo, a zatim mijenjamo vrijednost svojstva CSS transformacije da se prevede (ista udaljenost u pikselima, 0 ). To smo već radili više puta, tako da ne bi trebalo biti pitanja. Na kraju, ponovo pohranjujemo vrijednost trenutnog slajda u varijablu slideNow; ova vrijednost se može izračunati dodavanjem jedan indeksu kliknutog gumba.
To je sve, zapravo, ako nešto nije jasno, onda ću ostaviti link do jsfiddle, gdje će biti dat sav kod napisan u materijalu.
Hvala vam na pažnji!
Tagovi:
- jquery klizač
- css
- css3 animacija
- html
