Ako na svoju stranicu trebate dodati visokokvalitetni jQuery klizač slike, u ovom ćete članku pronaći opis potrebnih dodataka. Iako je jQuery učinio JavaScript mnogo lakšim za korištenje, još uvijek su nam potrebni dodaci za ubrzavanje procesa web dizajna.
Možemo promijeniti neke od ovih dodataka i izraditi nove klizače koji su mnogo više u skladu s ciljevima naše stranice.
Za druge klizače trebate samo dodati naslove, slike i odabrati efekte prijelaza slajdova koji dolaze s klizačem. Svi ovi dodaci su dobro dokumentirani, tako da im je lako dodati nove efekte ili značajke. Možete čak promijeniti okidače temeljene na događaju 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. Sve što je izašlo 2014. uvršteno je na ovaj popis.
JQuery klizači slika
Jssor Responsive Slider
Nedavno sam naišao na ovaj funkcionalni jQuery klizač i mogao sam se iz prve ruke uvjeriti da vrlo dobro radi svoj posao. Sadrži beskrajne mogućnosti koje se mogu proširiti kroz otvoreni kod klizača:
- Prilagodljivi dizajn;
- Više od 15 mogućnosti prilagodbe;
- Više od 15 efekata promjene slike;
- Galerija slika, vrtuljci, podrška za cijeli zaslon;
- Vertikalni rotator bannera, lista slajdova;
- Video podrška.
Demo | preuzimanje datoteka
PgwSlider je responzivni klizač baziran na JQuery / Zepto
Jedina svrha ovog dodatka je prikazivanje slajdova slika. Vrlo je kompaktan jer su jQuery datoteke veličine samo 2,5 KB, što ga čini vrlo brzim za učitavanje:
- Responzivni izgled;
- SEO optimizacija;
- Podržavaju različiti preglednici;
- Jednostavni prijelazi slika;
- Veličina arhive je samo 2,5 KB.
Demo | preuzimanje datoteka
Jquery vertikalni klizač za vijesti
Fleksibilan i koristan jQuery klizač dizajniran za izvore vijesti s popisom postova na lijevoj strani i slikom s desne strane:
- Prilagodljivi dizajn;
- Vertikalni stupac za prebacivanje vijesti;
- Proširena zaglavlja.
Demo | preuzimanje datoteka
Wallop klizač
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:
- Responzivni izgled;
- Jednostavan dizajn;
- Razne opcije za promjenu slajdova;
- Minimalni JavaScript kod;
- Veličina je samo 3 KB.
Demo | preuzimanje datoteka
Polaroidna galerija ravnog stila
Galerija u stilu dokumenta s fleksibilnim izgledom i lijepim dizajnom trebala bi zanimati mnoge od vas. Prikladnije za tablete i velike zaslone:
- Responzivni klizač;
- Ravni dizajn;
- Slučajna promjena slajdova;
- Potpuni pristup izvornom kodu.
Demo | preuzimanje datoteka
A-klizač
Demo | preuzimanje datoteka
HiSlider - HTML5, jQuery i WordPress klizač slika
HiSlider je predstavio novi besplatni dodatak jQuery klizača koji vam omogućuje stvaranje raznih galerija slika s fantastičnim prijelazima:
- Responzivni klizač;
- Nije potrebno znanje programiranja;
- Nekoliko sjajnih predložaka i skinova;
- Prekrasni efekti prijelaza;
- Podrška za različite platforme;
- Kompatibilan s WordPress, Joomla, Drupal;
- Mogućnost prikaza sadržaja različitih vrsta: slike, YouTube video i Vimeo video zapisi;
- Fleksibilna prilagodba;
- Korisne dodatne funkcije;
- Neograničen sadržaj prikazan.
Demo | Preuzmi
Vau klizač
WOW Slider je responzivni jQuery klizač slika s nevjerojatnim vizualima ( domine, okrenuti, zamutiti, preokrenuti i bljeskati, izletjeti, rolete) i profesionalnim predlošcima.
WOW Slider dolazi s instalacijskim čarobnjakom koji vam omogućuje stvaranje fantastičnih klizača u nekoliko sekundi bez potrebe za prolaskom koda ili uređivanjem slika. Također dostupno za preuzimanje verzija dodatka za Joomla i WordPress:
- Potpuno reagira
- Podrška za sve preglednike i sve vrste uređaja;
- Podrška za uređaje osjetljive na dodir;
- Jednostavna instalacija na WordPress;
- Fleksibilnost prilagodbe;
- SEO optimiziran.
Demo | Preuzmi
Nivo klizač - besplatni jQuery dodatak
Nivo Slider poznat je u cijelom svijetu kao najljepši i najjednostavniji klizač slika. Dodatak Nivo Slider besplatan je i objavljen pod MIT licencom:
- Potreban je JQuery 1.7 ili noviji;
- Prekrasni efekti prijelaza;
- Jednostavan i fleksibilan za prilagodbu;
- Kompaktan i prilagodljiv;
- Otvoreni izvor;
- Snažan i jednostavan;
- Nekoliko različitih šablona;
- Automatsko izrezivanje slike.
Demo | Preuzmi
Jednostavan jQuery klizač s tehničkom dokumentacijom
Ideja je inspirirana Appleovim klizačima u kojima može izletjeti nekoliko malih elemenata uz razne efekte animacije. Programeri su pokušali implementirati ovaj koncept, uzimajući u obzir minimalne zahtjeve za stvaranje jednostavnog dizajna za internetsku trgovinu, u kojoj elementi koji "izlijeću" predstavljaju različite kategorije:
- Responzivni izgled;
- Minimalistički dizajn;
- Razni učinci ispadanja i mijenjanja tobogana.
Demo | Preuzmi
Klizač za jQuery slike pune veličine
Vrlo jednostavan klizač koji zauzima 100% širine stranice i prilagođava se veličini ekrana mobilnih uređaja. Radi s CSS prijelazima, a slike su "slagane" sidrima. Sidro se može zamijeniti ili ukloniti ako ne želite povezati poveznicu sa slikom.
Kada je instaliran, klizač se širi na 100% širine zaslona. Također može automatski smanjiti veličinu slika slajdova:
- Responzivni jQuery klizač;
- Puna veličina;
- Minimalistički dizajn.
Demo | Preuzmi
Klizač elastičnog sadržaja + vodič
Elastic Content Slider automatski prilagođava širinu i visinu na temelju dimenzija nadređenog elementa. Ovo je jednostavan jQuery klizač. Sastoji se od područja slajdova na vrhu i trake s karticama za navigaciju na dnu. Klizač prilagođava svoju širinu i visinu kako bi odgovarao roditeljskom spremniku.
Kada se gledaju na dijagonalno malim zaslonima, navigacijske kartice se pretvaraju u male ikone:
- Prilagodljivi dizajn;
- Pomicanje klikom miša.
Demo | Preuzmi
Besplatni 3D stack klizač
Eksperimentalni klizač koji prelistava slike u 3D. Dva hrpa nalikuju hrpi papira, s kojih se, prilikom pomicanja, slike prikazuju u sredini klizača:
- Prilagodljivi dizajn;
- Flip-prijelaz;
- 3D efekti.
Demo | Preuzmi
Cijeli zaslon Slit Slider pokreće JQuery i CSS3 + vodič
Ovaj vodič će vam pokazati kako stvoriti klizač s zaokretom: ideja je izrezati i prikazati trenutni slajd dok otvarate sljedeću ili prethodnu sliku. Koristeći jQuery i CSS animaciju, možemo stvoriti jedinstvene efekte prijelaza:
- Prilagodljivi dizajn;
- Splitski prijelaz;
- Klizač za cijeli zaslon.
Demo | Preuzmi
Unislider je vrlo mali jQuery klizač
Bez nepotrebnih zvona i zviždaljki i označavanja, veličina je manja od 3KB. Koristite bilo koji HTML za svoje slajdove, proširite ga CSS-om. Sve što se odnosi na Unslider nalazi se na GitHubu:
- Podrška za razne preglednike;
- Podrška za tipkovnicu;
- Podešavanje visine;
- Prilagodljivi dizajn;
- Podrška za unos dodirom.
Demo | preuzimanje datoteka
Minimalni responzivni slajdovi
Jednostavan i kompaktan dodatak ( veličina je samo 1 Kb), koji stvara responzivni klizač pomoću elemenata unutar spremnika. ResponsiveSLides.js radi s velikim brojem preglednika, uključujući sve verzije IE od IE6 i novije:
- Potpuno reagira
- Veličina 1 KB;
- CSS3 prijelazi s mogućnošću pokretanja putem JavaScripta;
- Jednostavno označavanje pomoću popisa s grafičkim oznakama
- Mogućnost prilagodbe efekata prijelaza i trajanja gledanja jednog slajda;
- Podržava mogućnost stvaranja više dijaprojekcija;
- Automatsko i ručno pomicanje.
Demo | Preuzmi
Kamera - besplatni jQuery klizač
Kamera je dodatak s mnogim prijelaznim efektima, responzivnim izgledom. Jednostavan za postavljanje, podržan od strane mobilnih uređaja:
- Potpuno responzivni dizajn
- Potpisi;
- Mogućnost dodavanja videa;
- 33 različite ikone u boji.
Demo | Preuzmi
SlidesJS, responzivni jQuery dodatak
SlidesJS je responzivni jQuery dodatak (1.7.1 i noviji) s podrškom za dodir i CSS3 prijelaze. Eksperimentirajte s tim, isprobajte neke gotove primjere koji će vam pomoći da shvatite kako dodati SlidesJS u svoj projekt:
- Prilagodljivi dizajn;
- CSS3 prijelazi;
- Podrška za uređaje osjetljive na dodir;
- Jednostavan za postavljanje.
Demo | preuzimanje datoteka
BX Jquery klizač
Ovo je besplatni responzivni jQuery klizač:
- Potpuno odzivan - prilagođava se bilo kojem uređaju;
- Horizontalna, vertikalna promjena slajdova;
- Slajdovi mogu sadržavati slike, videozapise ili HTML sadržaj;
- Proširena podrška za uređaje osjetljive na dodir;
- Korištenje CSS prijelaza za animacije slajdova ( hardversko ubrzanje);
- Callback API i potpuno javne metode;
- Mala veličina datoteke;
- Jednostavan za implementaciju.
Demo | Preuzmi
FlexSlider 2
Najbolji responzivni klizač. Nova verzija je poboljšana kako bi se povećala brzina rada, kompaktnost.
Demo | preuzimanje datoteka
Galleria - prilagodljiva galerija fotografija koja se temelji na JavaScriptu
Galleriu koriste milijuni web-mjesta za stvaranje visokokvalitetnih galerija slika. Broj pozitivnih recenzija o njenom radu samo se prebacuje:
- Potpuno besplatno;
- Prikaz preko cijelog zaslona;
- 100% odzivni;
- 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 | preuzimanje datoteka
Blueberry je jednostavan responzivni jQuery klizač slike
Predstavljamo jQuery klizač za slike napisan posebno za responzivni web dizajn. Blueberry je eksperimentalni open source dodatak za klizač slika koji je napisan posebno za rad s responzivnim predlošcima:
- Minimalni dizajn;
- Responzivni izgled;
- Prezentacije.
Demo | preuzimanje datoteka
JQuery Popeye 2.1
Koriste se standardni elementi prve verzije programa: klizač nestaje ulijevo i pluta udesno. Ista navigacija i natpisi koji se pojavljuju pri lebdenju:
- Prilagodljivi dizajn;
- Podrška za potpise;
- Način prikaza slajdova.
Demo | preuzimanje datoteka
1. Izvrsna jQuery dijaprojekcija
Velika učinkovita dijaprojekcija koja koristi jQuery tehnologije.
2. jQuery dodatak "Scale Carousel"
Skalabilna dijaprojekcija pomoću jQueryja. Moći ćete postaviti dimenzije za slideshow koje vam najviše odgovaraju.
3. jQuery dodatak "slideJS"
Klizač slike s tekstualnim opisom.
4. Dodatak "JSliderNews"
5. CSS3 jQuery klizač
Kada zadržite pokazivač iznad strelica za navigaciju, pojavit će se kružna minijatura sljedećeg slajda.
6. Lijep jQuery klizač "Prezentacijski ciklus".
jQuery klizač s indikatorom učitavanja slike. Postoji automatska izmjena slajdova.
7. jQuery dodatak "Parallax Slider"
Klizač s 3D efektom pozadine. Vrhunac ovog klizača je pozadinsko kretanje koje se sastoji od nekoliko slojeva, od kojih se svaki pomiče različitom brzinom. Rezultat je imitacija volumetrijskog učinka. Jako lijepo izgleda, vidite i sami. Učinak se glatkije prikazuje u preglednicima 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 poveznice na sve moguće slučajeve korištenja ovog dodatka.
9.jQuery Image Slider, "slideJS" dodatak
Moderan jQuery klizač sigurno će moći ukrasiti vaš projekt.
10. jQuery plug-in slideshow "Easy Slides" v1.1
Jednostavan za korištenje jQuery dodatak za izradu dijaprojekcija.
11. Dodatak "jQuery Slidy"
Lagani jQuery dodatak u raznim dizajnima. Postoji automatska izmjena slajdova.
12.jQuery CSS galerija s automatskim izmjenjivačem slajdova
Ako posjetitelj ne klikne na strelice "Naprijed" ili "Natrag" unutar određenog vremenskog razdoblja, galerija će se automatski početi pomicati.
13. jQuery Nivo klizač
Vrlo profesionalni, lagani dodatak visoke kvalitete s važećim kodom. Postoji mnogo različitih efekata prijelaza slajdova.
14. Klizač jQuery "MobilySlider".
Svježi klizač. jQuery klizač s raznim efektima za promjenu slike.
15. Dodatak jQuery Slider²
Lagani klizač s automatskom izmjenom klizača.
16. Svježi javascript klizač
Klizač s automatskom promjenom slike.
Dodatak za implementaciju slide showa s automatskom izmjenom slajdova. Moguće je upravljati prikazom pomoću sličica.
jQuery CSS klizač slike pomoću dodatka NivoSlider.
19. Klizač jQuery "jShowOff".
Dodatak za rotaciju sadržaja. Tri slučaja korištenja: bez navigacije (s automatskom promjenom formata slideshowa), s navigacijom u obliku gumba, s navigacijom u obliku minijatura.
20. Dodatak "Portfolio s efektima zatvarača"
Svježi jQuery dodatak za portfelje fotografija. Galerija ima zanimljiv efekt mijenjanja slika. Fotografije se slijede jedna za drugom s učinkom sličnim radu zatvarača objektiva.
21. Lagani javascript CSS klizač "TinySlider 2"
Implementacija klizača slike pomoću javascripta i CSS-a.
22. Sjajan klizač "Tinycircleslider"
Elegantan okrugli klizač. Prijelaz između slika vrši se povlačenjem duž opsega klizača u obliku crvenog kruga. Savršeno će se uklopiti u vašu stranicu ako koristite okrugle elemente u svom dizajnu.
23. Klizač slike jQuery
Easy Slider Kit. Klizač je predstavljen u različitim verzijama: okomito i vodoravno. Također, implementirane su različite vrste navigacije između slika: pomoću tipki "Naprijed" i "Natrag", pomoću kotačića miša, klikom miša na slajd.
24. Galerija s minijaturama "Slider Kit"
Galerija "Slider Kit". Pomicanje po sličicama izvodi se i okomito i vodoravno. Prijelaz između slika vrši se pomoću: kotačića miša, klika miša ili lebdenja iznad minijature.
25. Klizač sadržaja kompleta klizača jQuery
JQuery okomiti i horizontalni klizač sadržaja.
26. jQuery Slider Kit Slideshow
Slideshow s automatskom izmjenom slajdova.
27. Lagani profesionalni javascript CSS3 klizač
Uredan jQuery i CSS3 klizač kreiran 2011.
jQuery sličica slajdova.
29. Jednostavan jQuery dijaprojekcija
Slideshow s navigacijskim gumbima.
30. Sjajan jQuery "Skitter" dijaprojekcija
jQuery dodatak "Skitter" za stvaranje zadivljujućih dijaprojekcija. Dodatak podržava 22 (!) vrste raznih animacijskih efekata prilikom mijenjanja slika. Može raditi s dvije opcije navigacije slajdovima: brojevima slajdova i minijaturama. Svakako pogledajte demo, vrlo kvalitetan nalaz. Korištene tehnologije: CSS, HTML, jQuery, PHP.
31. Slideshow "Nezgodno"
Funkcionalna dijaprojekcija. U obliku slajdova mogu biti: jednostavne slike, slike s natpisima, slike s opisima, videoisječci. Možete se kretati pomoću strelica, veza s brojevima slajdova i tipki lijevo/desno na tipkovnici. Slideshow je napravljen u nekoliko verzija: s minijaturama i bez njih. Da biste vidjeli sve opcije, slijedite poveznice Demo #1 - Demo #6 koje se nalaze na vrhu demo stranice.
Vrlo originalan dizajn klizača slike, koji podsjeća na ventilator. Animirana promjena slajda. Navigacija između slika vrši se pomoću strelica. Tu je i automatsko prebacivanje, koje 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 preglednika. Za svaku sliku pojavljuje se blok s opisom.
34. Klizač "Flux Slider" u jQueryju i CSS3
Novi jQuery klizač. Nekoliko zgodnih animiranih efekata prilikom mijenjanja slajdova.
35. Dodatak jQuery jSwitch
Animirana jQuery galerija.
Jednostavan prikaz slajdova u jQueryju s automatskom izmjenom slajdova.
37. Nova verzija dodatka "SlideDeck 1.2.2"
Profesionalni klizač sadržaja. Postoje opcije s automatskom izmjenom slajdova, kao i opcija pomoću kotačića miša za pomicanje između slajdova.
38. jQuery Sudo klizač
Lagani klizač slika u jQueryju. Postoji mnogo mogućnosti implementacije: horizontalna i okomita promjena slike, sa i bez referenci na broj slajda, sa i bez natpisa slika, razni efekti promjene slike. Postoji funkcija automatske promjene klizača. Linkovi na sve primjere implementacije mogu se pronaći na demo stranici.
39. jQuery CSS3 dijaprojekcija
Prezentacija sličica podržava automatsku promjenu slajdova.
40. Klizač jQuery Flux
Klizač s mnogo efekata za promjenu slika.
41. Jednostavan jQuery klizač
Elegantan jQuery klizač za slike.
42. "Craftyslide" jQuery dijaprojekcija
43. jQuery dijaprojekcija preko cijelog zaslona
jQuery HTML5 dijaprojekcija pune širine sa zvučnim zapisom.
Jednostavan jQuery dijaprojekcija.
Vrijeme ne miruje i s njim napreduje. To je također utjecalo na prostranost interneta. Već vidite kako se izgled stranica mijenja, posebno je popularan responsive dizajn. I u tom smislu pojavilo se dosta novih. responzivni jquery klizači, galerije, vrtuljke ili slične dodatke.
1. Klizač za responzivne horizontalne postove
Prilagodljivi horizontalni vrtuljak s detaljnim uputama za instalaciju. Izrađen je u jednostavnom stilu, ali ga možete stilizirati kako želite.
2. Klizač na Glide.js
Ovaj klizač je prikladan za bilo koju stranicu. Koristi open source Glide.js. Boje klizača mogu se lako mijenjati.
3. Slideshow s nagnutim sadržajem
Klizač za responzivni sadržaj. Vrhunac ovog klizača je 3d efekt slika, kao i različite animacije pojavljivanja nasumičnim redoslijedom.
4. Klizač koji koristi HTML5 platno
Vrlo lijep i impresivan klizač s interaktivnim česticama. Izvodi se pomoću HTML5 platna,
5. Klizač "Morphing images"
Klizač s efektom morfiranja (glatka transformacija s jednog objekta na drugi). U ovom primjeru, klizač dobro funkcionira za portfelj web programera ili web studio kao portfelj.
6. Kružni klizač
Klizač u obliku kruga s flip efektom.
7. Klizač zamućene pozadine
Prilagodljivi klizač s prekidačem i zamućenjem pozadine.
8. Prilagodljivi modni klizač
Jednostavan, lagan i responzivan klizač web stranice.
9. Slicebox - jQuery 3D klizač slike(AŽURIRANA)
Ažurirana verzija klizača Slicebox s popravcima i novim značajkama.
10. Besplatna animirana responzivna slikovna mreža
Dodatak za jQuery za stvaranje fleksibilne mreže slika koja će mijenjati snimke koristeći različite animacije i vremena. To može dobro funkcionirati kao pozadina ili ukrasni element na web mjestu, jer možemo prilagoditi izgled novih slika i njihove prijelaze. Dodatak je napravljen u nekoliko verzija.
11. Flexslider
Univerzalni besplatni dodatak za vašu web stranicu. Ovaj dodatak dolazi s nekoliko opcija klizača i vrtuljka.
12. Okvir za fotografije
Fotorama je svestran dodatak. Ima puno postavki, sve radi brzo i jednostavno, postoji mogućnost pregleda slajdova na cijelom ekranu. Klizač se može koristiti i u fiksnoj veličini i u odzivu, sa ili bez minijatura, sa ili bez kružnog pomicanja i još mnogo toga.
p.s.Stavio sam klizač nekoliko puta i mislim da je jedan od najboljih
13. Besplatan i brz klizač 3D galerije sa sličicama.
Eksperimentalni klizač galerije 3DPanelLayout s mrežom i zanimljivim efektima animacije.
14. Klizač na css3
Responzivni klizač izrađen je u css3 s glatkim protokom sadržaja i laganom animacijom.
15. WOW klizač
Vau klizač je klizač slika s nevjerojatnim vizualima.
17. Elastična
Potpuno prilagodljiv elastični klizač sa sličicama slajdova.
18. Prorez
To je klizač koji reagira na cijeli zaslon koji koristi css3 animaciju. Klizač je izrađen u dvije verzije. animacija je dosta neobična i lijepa.
19.Prilagodljiva fotogalerija plus
Jednostavna besplatna galerija klizača s učitanim slikama.
20. Responzivni klizač za WordPress
Responzivni besplatni klizač za WP.
21. Klizač sadržaja paralaksa
Klizač s efektom paralakse i kontrolom svakog elementa s CSS3.
22. Klizač s glazbom za povezivanje
Klizač koji koristi JPlayer otvorenog koda. Ovaj klizač nalikuje prezentaciji s glazbom.
23. Klizač s jmpress.js
Responzivni klizač temelji se na jmpress.js i stoga vam omogućuje korištenje nekih cool 3D efekata na slajdovima.
24. Slideshow brzim lebdenjem
Slide show s brzim prebacivanjem slajdova. Klizači se preklope na lebdeći.
25. Slika harmonika sa CSS3
Harmonika slika pomoću css3.
26. Dodatak za galeriju optimiziran na dodir
To je responzivna galerija koja je optimizirana za uređaje osjetljive na dodir.
27.3D galerija
3D zidna galerija- kreiran za preglednik Safari, gdje će biti vidljiv 3D efekt. Gledano u drugom pregledniku, funkcionalnost će biti u redu, ali 3D efekt neće biti vidljiv.
28. Klizač za paginaciju
Responzivni klizač za paginaciju s klizačem korisničkog sučelja jQuery. ideja je koristiti jednostavan koncept navigacije. Moguće je premotavanje svih slika ili slajd po slajd prebacivanje.
29. Montaža slike pomoću jQueryja
Automatsko pozicioniranje slika na temelju širine zaslona. Vrlo korisna stvar pri razvoju web stranice s portfeljem.
30.3D galerija
Jednostavan 3D kružni klizač u css3 i jQueryju.
31. Cijeli zaslon način rada s 3D efektom na css3 i jQuery
Klizač preko cijelog zaslona s prekrasnim prijelazom.
Jedan od najvećih izazova s kojima se zapadna civilizacija trenutno suočava jest kako prikazati puno sadržaja na malom prostoru.
Jedno učinkovito rješenje je postavljanje sadržaja u sekvencijalne blokove koristeći ono što je poznato u industriji ( i u online zajednici) koji se naziva klizač sadržaja. Možda niste čuli za njega, ali kladim se da ste ga svakako trebali vidjeti.
Kako bismo vam osvježili pamćenje i dali ideju o tome što ćemo stvarati, u nastavku primjer klizača sadržaja:
U ovom članku pokazat ću vam kako izraditi svoj vlastiti prekrasan klizač sadržaja koji jako liči na ovaj. Osim stvaranja klizača sadržaja, naučit ćete puno o tome kako HTML, CSS i JavaScript međusobno djeluju kako bi stvorili takav element. Općenito, čeka vas puno novih stvari, pa krenimo.
Pregled kako funkcionira
Prije nego što bezglavo zaronimo u HTML, CSS i JavaScript koji će biti potrebni da bi sve ovo funkcioniralo, napravimo mali korak unatrag i razumijemo elemente koji čine naš klizač sadržaja.
Prvo, imamo sadržaj koji želimo gurnuti u klizač:
Sadržaj može biti što god želite. To mogu biti slike, standardni HTML sadržaj, kombinacija nekoliko vrsta sadržaja itd. To zapravo nije važno. Ako se naš sadržaj može umotati u DIV elemente, to je u redu. Samo trebate osigurati da svaki pojedinačni blok sadržaja ima istu širinu i visinu.
Kada pregledavate klizač, istovremeno vidite samo jedan blok sadržaja. Ako ne poduzmete dodatne korake, tada sadržaj koji se istovremeno prikazuje u izvornoj veličini može pretvoriti klizač u nešto vrlo vizualno neprivlačno.
To ćemo popraviti u dva koraka. Prvo ćemo sadržaj omotati u spremnik iste veličine kao i jedan od blokova sadržaja:
Nakon što smo sadržaj omotali u spremnik, izrezujemo sve elemente oko bloka sadržaja kako bismo osigurali da se istovremeno prikazuje samo jedan blok:
Sljedeći korak je mogućnost pregleda ostatka sadržaja. To se može učiniti na razne načine. U ovom članku koristimo skup kružnih poveznica na koje možete kliknuti:
Posljednja stvar koju treba učiniti da bi klizač funkcionirao je da svaku vezu učinite klikavom. To će zahtijevati neke CSS trikove zajedno s JavaScriptom, ali ništa previše komplicirano. I ovo, dragi moji prijatelji i neprijatelji, i cijeli kratki pregled od čega se sastoji klizač sadržaja.
U sljedećih nekoliko odjeljaka pogledat ćemo stvarne HTML, CSS i JavaScript kodove koji će pokretati naš klizač.
Sadržaj
Slijedimo iste korake koje smo obradili u kratkom pregledu i počnimo s ... sadržajem. Prvo, moramo stvoriti početnu točku. Napravimo prazan HTML dokument i dodajmo mu sljedeći kod iz početnog HTML5 predloška:
Ova oznaka ne čini ništa više od definiranja strukture dokumenta, ali je prvi korak za daljnje dodavanje našeg sadržaja. Učinimo to u sljedećem odjeljku.
Sadržaj ( ovaj put pravi)
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; položaj: relativan; lijevo: 0px;) .content (float: lijevo; širina: 550px; visina: 350px; razmak: normalan; background-repeat: no-repeat;) #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; slika pozadine: url (" http://www.kirupa.com/images/pinkSquare.png ");) #itemFour (boja pozadine: # DC143C; slika pozadine: url (" http://www.kirupa.com/images/graySquare.png ");)
Sada, kada pogledate stranicu, vidjet ćete nešto slično onome što je prikazano na snimci zaslona:
Vidjet ćete četiri velika pravokutna bloka uredno poredana jedan pored drugog. Ovisno o razlučivosti zaslona i veličini prozora preglednika, možda ćete se morati malo pomaknuti udesno ili ulijevo da biste vidjeli sve pravokutnike.
Sada obratite malo pažnje i pokušajte razumjeti zašto vidite ono što vidite. Pregledajte HTML oznaku i proučite elemente koji se nalaze u vašem dokumentu.
Obratite pažnju na klasu i id vrijednosti koje se koriste u njemu, jer će slijediti pravila stila koji ste dodali. Pogledajte pravila stila i kako njihovo renderiranje utječe na rezultat. Sada da ponovimo sve.
Što smo učinili
U našoj HTML oznaci sadržaj koji vidite sastoji se od četiri diva, od kojih svaki sadrži vrijednost iz 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; background-repeat: no-repeat;)
Pravilo stila .content također postavlja float ulijevo. To uzrokuje da se divovi poredaju. Posljednje što ovo pravilo stila deklarira je svojstvo razmaka. Ovo svojstvo određuje kako će tekst u odlomku biti omotan.
Primijenio sam ovo svojstvo samo radi praktičnosti. Ako odlučite otići izvan okvira ovog članka i dodati sadržaj za svaki div, bit ćete mi samo zahvalni jer će vaš tekst biti prikladno omotan ili ukloniti to svojstvo ( ili ga postavite na drugu vrijednost) ako to ne želite vidjeti.
U ovom trenutku, naš div element je odgovarajuće veličine i poravnat. Šteta što je potpuno nevidljiv:
Da bismo riješili ovaj problem, svakom divu dodjeljujemo jedinstveni ID putem id vrijednosti: itemOne, itemTwo, itemThree, anditemFour. U odjeljku stilova imamo četiri stilska pravila koja odgovaraju ovim vrijednostima id-a:
#itemOne (boja pozadine: # 0099CC; pozadinska slika: 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; slika pozadine: url ("http://www.kirupa.com/images /pinkSquare.png ");) #itemFour (boja pozadine: # E8E8E8; slika pozadine: url (" http://www.kirupa.com/images/graySquare.png ");)
Kao što možete vidjeti, 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 tajanstveni div koji sadrži id omota:
Ovaj element omotava sav naš sadržaj u jedan spremnik. Ovo nije kontejner koji sam imao na umu u recenziji kada sam govorio o izrezivanju cijelog sadržaja oko blokova sadržaja.
Ovaj spremnik je namijenjen za malo drugačije stvari. Doslovno samo omotava sadržaj tako da ga možemo vidjeti.
Odgovarajuće pravilo stila #wrapper ispunjava ovaj zadatak:
#wrapper (širina: 2200px; položaj: relativan; lijevo: 0px;)
Prvo, ovo pravilo stila određuje širinu elementa omotnice na 2200 piksela. To jest, ukupna širina našeg sadržaja ... koju dobijete množenjem 4 ( po broju div) za 550 piksela.
Svojstva položaja i lijevo namijenjena su postavljanju mogućnosti pomicanja spremnika kamo god želimo. Postavljanjem svojstva položaja na relativno, uklanjamo ovaj element iz standardne strukture dokumenta i omogućujemo ga postavljanje bilo gdje koristeći vrijednosti piksela u odnosu na mjesto na kojem se trenutno nalazi.
Budući da su naši sadržajni divovi podređeni ovom divu, oni se povlače do mjesta gdje se nalazi roditeljski div. Kao što možete zamisliti, ovo je vrlo zgodno!
Obrezivanje sadržaja
U prethodnom odjeljku pobrinuli smo se za prikazivanje blokova sadržaja. Sljedeća stvar koju ćemo učiniti je izrezati naš sadržaj tako da istovremeno bude vidljiv samo jedan blok klizača.
Ovdje nam treba glavni kontejner. Zamotajte sve svoje HTML divove u div s ID-om contentContainer:
Samo dodajte dva nova retka i, ako želite, uvučene retke, koji služe samo za stiliziranje HTML koda kako izgleda.
Upravo sada, ako pregledavate naš omotani (opet) sadržaj, nećete vidjeti ništa novo. Samo pakiranje elemenata u drugi div ne čini ništa puno, a još manje ništa što želimo učiniti kako bismo skratili sadržaj.
Da biste dodali ovu smislenu radnju, stvorite sljedeće pravilo stila #contentContainer:
#contentContainer (širina: 550px; visina: 350px; obrub: 5px crni čvrsti; preljev: skriven;)
Primijetite da veličinu elementa contentContainer postavljate na 550 x 350 piksela. To jest, točno iste veličine kao i svaki od blokova sadržaja. Kako bi se klizač malo istaknuo, postavili smo ga na crni obrub od 5px.
Posljednje što radimo je izrezivanje sadržaja postavljanjem svojstva preljeva na skriveno. Ovo je za skrivanje svega izvan contentContainer-a.
Sve zajedno nam daje sljedeću sliku u pregledniku:
Imajte na umu da je sada vidljiv samo sadržaj vašeg prvog bloka. Ostatak sadržaja još uvijek postoji, samo je sada skriven zbog našeg izrezivanja kroz skrivenu vrijednost svojstva overflow.
Navigacijske veze
Pa smo došli do njih! Sve smo bliže dobivanju potpuno funkcionalnog klizača. U ovom odjeljku ćemo se pozabaviti navigacijskim vezama - elementima koje kliknete da biste vidjeli druge blokove sadržaja.
Ove veze nemaju nikakve veze s našim contentContainer ili bilo kojim drugim dijelom HTML-a koji već imamo. Morate dodati istaknute retke u HTML koji već imamo (ali iznad oznake skripte):
Pogledajmo na brzinu HTML koji ste upravo dodali. Prvo, imamo div pod nazivom navLinks koji opisuje neuređeni popis. Same veze su predstavljene kao stavke popisa.
Svaka stavka popisa sadrži vrijednost iz klase itemLinks, kao i prilagođeni data- * atribut koji se zove data-pos. Na ovaj atribut ćemo se vratiti malo kasnije, ali za sada samo imajte na umu da on postoji.
Moramo stilizirati HTML 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: središte; margina: 10px; stil liste: nema; kursor: pokazivač; boja pozadine: #CCCCCC; padding: 5px; radijus obruba: 50%; granica: crna 5px čvrsta;) #navLinks ul li: lebdeći ( background-color: # FFFF00;) #navLinks ul li.active (boja pozadine: # 333333; boja: #FFFFFF; širina obrisa: 7px;) #navLinks ul li.active: lebdenje (boja pozadine: # 484848; boja: #FFFFFF;)
Vau, koliko CSS-a. Unatoč činjenici da postoji mnogo koda, u njemu nema ništa stvarno jedinstveno ili zanimljivo. Dio CSS koda stvara horizontalni izbornik s vezama koje se prikazuju jedna pored druge.
Ostatak koda određuje izgled svake veze, kao i odgovarajući odabir pri lebdenju mišem.
Još uvijek se vrijedi zadržati na jednoj toč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: lebdenje (boja pozadine: # 484848; boja: #FFFFFF;)
Ako se sjećate, u našem HTML kodu nije postojao element koji bi imao vrijednost aktivne klase. Bez obzira na to, ova pravila stila i dalje će se primjenjivati jer se aktivna klasa dinamički dodaje putem jedne od naših veza.
Ako vam je sada teško sve to shvatiti, ne brinite, vrlo brzo ćemo to detaljno pogledati.
Trenutno naš klizač izgleda ovako:
Ako vaš klizač ne izgleda kako treba, postoji velika vjerojatnost da ste pogriješili... ili nešto drugo. Je li se to dogodilo?
Izrada samog klizača
U redu, za sada imamo nešto što jako liči na radni klizač. Međutim, kada kliknete bilo koju od poveznica, ne događa se apsolutno ništa.
Kreirajmo sada radni klizač, ali prije toga ćemo dodati JavaScript i neke cool elemente... naime lijepe CSS prijelaze.
Dodavanje JavaScripta
Unutar oznake skripte dodajte sljedeće retke JavaScript koda:
// samo pitam DOM ... kao da pitam šefa za dopuštenje! var links = document.querySelectorAll (". itemLinks"); var wrapper = document.querySelector ("# omotač"); // activeLink daje oznaku za aktivni element var activeLink = 0; // postaviti 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 trebamo učiniti je osigurati glatki prijelaz umjesto naglih promjena slajdova.
Dodavanje prijelaza
Trenutno imamo klizač sadržaja koji još ne pomiče sadržaj glatko. Umjesto toga, slajdovi oštro skaču s jednog na drugi. Da bi pomicanje sadržaja bilo glatko, upotrijebimo CSS prijelaz. Dodajmo jedan od mogućih prijelaza našem klizaču.
Pronađite pravilo stila #wrapper i dodajte mu jedan redak:
Linija koju ste dodali definira prijelaz. Svojstvo navedeno u njemu određuje da se prijelaz treba dogoditi kada se promijeni lijevo svojstvo. Naš prijelaz će trajati 0,5 sekunde i koristit će funkciju vremena za jednostavno ulazak kako bi ubrzao prijelaz na početku prijelaza i usporio na kraju.
Budući da svojstvo prijelaza još uvijek prolazi kroz neke promjene u W3C-u, morat ćete koristiti prefikse kako biste osigurali da bilo koji moderni preglednik može primijeniti prijelaz. Ako se ne želite baviti ovim, dodajte sljedeću skriptu neposredno prije oznake skripte:
Ne, ova skripta ne čini ništa zlonamjerno. Ovo je hostirana verzija Lei Veru knjižnice -bez prefiksa... Kako ne biste naučili hrpu svega o tome kako klizači rade, možete jednostavno preuzeti njezinu skriptu, prenijeti je na svoj poslužitelj i povezati se na svoju verziju.
U svakom slučaju, ako trenutno pregledavate 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!!!
Raščlanjivanje koda (i svega ostalog!)
Sada kada imamo radni klizač sadržaja, pokušajmo od početka shvatiti kako kod sve to povezuje.
Što se zapravo događa
Nakon učitavanja klizača sadržaja, možete vidjeti kako se prikazuje 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 koji dio sadržaja treba prikazati u vidljivom području zbog bliskog odnosa između svake navigacijske veze i položaja u pikselima 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 vodoravno na 0 piksela.
Kako to znamo? Svi naši blokovi sadržaja omotani su unutar elementa omotača koji obuhvaća sav naš sadržaj, a lijevi rub elementa omota je na 0 piksela:
Ovo je deklarirano u pravilu stila #wrapper. Iz ovog stilskog pravila također znamo da su svi blokovi sadržaja pomaknuti ulijevo i poredani u red jedan za drugim.
Znajući to, možemo izračunati pozicije za sve blokove sadržaja na sljedeći način:
Prvi blok nalazi se u točki 0 piksela. Širina prvog bloka sadržaja je položaj drugog bloka. To je 550 piksela. Svaki sljedeći blok ima poziciju 550 piksela veću od prethodnog.
Budući da znamo točan položaj piksela svakog bloka sadržaja, možemo upotrijebiti ove informacije da kažemo klizaču sadržaja da premjesti element omota na željeno mjesto tako da dio sadržaja koji želimo bude vidljiv.
Podaci-pos!
Super, sada znamo pozicije svih blokova sadržaja. Ono što još nismo razmotrili je kako će nam poznavanje položaja bloka sadržaja u pikselima pomoći da prikažemo željeni blok u prozoru klizača.
Kako možemo naznačiti da kada se klikne na vezu, treba prikazati određeni blok sadržaja? Samo. Svaka veza sadrži točan položaj (u pikselima) bloka sadržaja kojem odgovara:
Imajte na umu da atribut data-pos upućuje svaku od veza na vrijednost svakog od atributa data-pos. Oni su jednaki negativnoj vrijednosti izvornog horizontalnog položaja svakog od blokova sadržaja.
Kada kliknemo na vezu, JavaScript se koristi za čitanje atributa data-pos povezanog s ovom vezom, a zatim prebacivanje položaja piksela za naš element omota na vrijednost koja je pročitana iz atributa.
Na primjer, evo što se događa nakon klika na treću vezu:
Treća veza ima vrijednost data-pos od 1100 piksela. To odgovara koliko piksela treba premjestiti omotač spremnika da bi se treći blok sadržaja pojavio u vidljivom području. Klikom na bilo koju drugu vezu postavit će se svojstvo elementa omota na vrijednost sadržanu u atributu data-pos te veze.
U redu, shvatili smo odnos između poveznica i položaja sadržaja o kojem sam ranije govorio. Sada samo moramo razmotriti JavaScript, koji pretvara sve o čemu sam napisao u ovom odjeljku u nešto što će preglednik razumjeti.
Sve je o JavaScriptu
Budući da sada imate konceptualno razumijevanje kako sve funkcionira unutar našeg klizača sadržaja, pogledajmo JavaScript koji implementira sve što znate. Kao što to radim u svim svojim člancima, raščlanimo svaki redak JavaScripta i vidimo što radi za naš klizač.
Počnimo od samog vrha:
var links = document.querySelectorAll (". itemLinks"); var wrapper = document.querySelector ("# omotač");
Varijabla links uzima skup svih elemenata u našem dokumentu koji imaju vrijednost u klasi itemLinks. Ove stavke su stavke popisa koje djeluju kao navigacijske veze. Varijabla omota vrlo je slična vezama. Potreban je pokazivač na omot.
querySelector i querySelectorAll
Primijetite 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 koristi se za pohranjivanje položaja trenutno prikazanog sadržaja. Bolje ćete razumjeti značenje ove varijable kada je malo kasnije objasnim na djelu.
Sljedeći skup redaka je for petlja:
// postaviti praćenje 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 alat za praćenje događaja pozvat će funkciju setClickedItem kada se uhvati događaj klika.
Sljedeći redak uzrokuje čitav niz promjena:
// postavi prvu stavku kao aktivnu links.classList.add ("aktivan");
Dodamo vrijednost aktivne klase prvom elementu navigacijske veze. To se postiže prosljeđivanjem vrijednosti activeLink u niz veza. Budući da je activeLink 0, obično polje uzima prvi element i, koristeći classList API, dodaje vrijednost aktivnoj klasi.
Nakon što se ovaj redak koda izvrši, sjećate se da smo pogledali sljedeća pravila stila?
Pa, sada ova pravila stila stupaju na snagu i pomažu da se aktivna navigacijska poveznica izdvoji s popisa ostalih neaktivnih veza. Na ova stilska pravila vratit ćemo se malo kasnije i detaljnije ih pogledati.
Sljedeća stvar koju ćemo pogledati je rukovatelj događaja setClickedItem, 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 na neaktivne pozivom removeActiveLinks. Pogledat ćemo ovu značajku malo kasnije.
Još jedna važna stvar koju ova funkcija čini je da mijenja vrijednost svojstva itemID odabrane stavke u activeLink. To osigurava da activeLink uvijek pokazuje na broj koji odgovara bloku sadržaja koji je trenutno prikazan u klizaču.
Nakon odrađenih ova dva ( prilično dosadno), ova funkcija prosljeđuje vezu na odabranu stavku funkciji changePosition. Što zauzvrat čini nekoliko nevjerojatnih stvari, o kojima ću raspravljati u sljedećem odlomku.
Ovdje se događaju zanimljive promjene! Skočimo malo naprijed i pogledajmo funkciju changePosition:
// Rukovatelj mijenja položaj klizača nakon što se uvjerimo // da je veza koja nam je potrebna odabrana kao aktivna. funkcija changePosition (link) (link.classList.add ("aktivan"); var position = link.getAttribute ("data-pos"); wrapper.style.left = position;)
Ova funkcija radi dvije stvari:
Í. Prebacuje vizualni prikaz odabrane veze kako bi označio da je trenutno aktivna.
II. Postavlja položaj elementa omotača.
Pogledajmo pobliže ove dvije stvari.
Uključite vizualni prikaz odabrane/aktivne veze
Da vam bude jasnije, ono o čemu sam prije govorio, vaše navigacijske veze mogu biti u jednom od dva stanja. Ova stanja služe 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 poveznici trenutno aktivan, a prve tri veze neaktivne.
Ova vizualna promjena postiže se dodavanjem i uklanjanjem CSS klasa. Aktivna klasa dodaje se aktivnoj poveznici. Sve veze koje nisu aktivne ne sadrže aktivnu vrijednost klase. Shvatit ćete kako to funkcionira kada pogledamo funkciju removeActiveLinks.
U svakom slučaju, sjećate 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: lebdenje (boja pozadine: # 484848; boja: #FFFFFF;)
U našem setClickedItem ( također poznat kao funkcija koja će biti pozvana kao rezultat klika 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 gumb za globalno resetiranje. Iterira preko navigacijskih veza koje su pohranjene u varijablu veze i uklanja vrijednost aktivne klase pomoću classList.remove (). Samo imajte na umu da ako je bilo koja od navigacijskih veza sadržavala aktivnu vrijednost klase, pa... više je neće biti.
Stoga smo pokrili kako ukloniti aktivnu klasu sa svih vaših veza. Dodavanje klase je pak 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 se za ponovno dodavanje aktivnih vrijednosti klase na odabranu vezu. Ova odabrana veza prima argument veze koji joj se prosljeđuje.
Postavljanje položaja školjke
Skoro smo gotovi! Nakon svih ovih koraka, konačno dolazimo do funkcije changePosition, koja zapravo postavlja položaj elementa ljuske klizača i prikazuje blok sadržaja koji odgovara poveznici koju ste odabrali.
Pogledajmo sljedeći isječak:
funkcija changePosition (link) (link.classList.add ("aktivan"); var position = link.getAttribute ("data-pos"); wrapper.style.left = position;)
Varijabla pozicije pohranjuje vrijednost atributa data-pos veze na koju smo kliknuli. Nakon što dobijemo vrijednost atributa data-pos, postavljamo CSS lijevo svojstvo elementa omotača na istu vrijednost.
Kako se to odnosi na implementaciju efekta klizača? Sjećate li se da smo prije nekog vremena dodali jedno pravilo stilu #wrapper?
#wrapper (širina: 2200px; položaj: relativan; lijevo: 0px; prijelaz: lijevo .5s jednostavnog ulaska;)
Imajte na umu da smo definirali prijelaz koji će stupiti na snagu kada se promijeni lijevo svojstvo. Pogodite što naš JavaScript radi? Postavlja svojstvo lijevo! CSS prijelaz otkriva ovu promjenu i pokreće kretanje sadržaja. Sve što trebate učiniti da sve ovo funkcionira jest dodati jedan redak JavaScripta.
Ne znam za vas, ali meni je to jednostavno nevjerojatno. To je nešto što nismo mogli zamisliti prije nekoliko godina kada smo morali uložiti puno truda i napisati kod kako bismo riješili efekt klizača. To je ono što naš klizač sadržaja čini lijepim.
Upravo tako, upravo smo od nule stvorili klizač sadržaja i (što je još važnije) naučili kako funkcionira.
Klizač za poboljšanje sadržaja
Klizač sadržaja koji smo upravo stvorili prilično je kul, ali ga možete učiniti još hladnijim. U ovom ćemo odjeljku pogledati dva poboljšanja koja bi vam mogla biti korisna. Usput ćemo naučiti neke nove JavaScript i CSS trikove. Bit će, kako mladi sada kažu: "Plačem!"
Pomicanje s translate3d transformacijom
U ovom trenutku naši se slajdovi pomiču promjenom vrijednosti svojstva CSS lijevo koje se primjenjuje na element div omotača. Korištenjem lijevog svojstva činimo da klizač funkcionira, međutim ova metoda ima ozbiljne nedostatke. Ne možete koristiti hardversko ubrzanje kako biste osigurali glatke prijelaze slajdova.
To se posebno odnosi na mobilne uređaje, s internetskom vezom male brzine, koji često koriste hardver, a ovdje mogu biti posebno uočljive povremene promjene na slajdovima poput skokova.
To 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 promijenit će položaj ciljnog elementa.
Značajka ove funkcije je i činjenica da kao rezultat njezine upotrebe hardver preglednika ubrzava promjenu položaja. Što čekamo?
Prva stvar koju trebamo učiniti je promijeniti pravilo stila #wrapper. Zamijenite deklaraciju položaja i lijevih svojstava sljedećim kodom:
Dakle, transformacija se koristi za postavljanje početnog položaja elementa omotača.
Prvi korak: dodavanje građevinskih elemenata
U prvoj fazi 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 (transformira); // funkcija upravljanja prefiksima dobavljača getSupportedPropertyName (svojstva) (za (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 pomoću prefiksa dobavljača, tako da će ga podržati što više preglednika.
Neću objašnjavati ove nizove u ovom članku. Jedino što trebate znati je da sav ovaj kod pomaže u postavljanju svojstva Property na transform, msTransform, mozTransform ili oTransform. Ovisno o tome koliko je vaš preglednik star, koristit će se jedna od ovih vrijednosti.
Drugi korak: predstavljanje Ahoy!
U funkciji changePosition pronađite sljedeće retke 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 = "(! LANG: translate3d (" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}
Ovaj kod radi prilično jednostavne stvari. Varijabla translateValue stvara prikaz funkcije translate3d koji se temelji na nizovima u kojem je X dio ispunjen vrijednošću varijable položaja. Nakon što je ova linija stvorena, sve što moramo učiniti je proslijediti je objektu stila elementa omotača.
Imajte na umu da definicijom odgovarajućeg svojstva stila upravlja varijabla transformProperty, koju smo ranije pokrili.
Ako sada pogledate dokument, vidjet ćete da blokovi sadržaja u klizaču skaču s jednog mjesta na drugo.
Očito, ovo nije ono što ste očekivali vidjeti. Što se dogodilo s glatkim kretanjem? Odgovor je da nam nedostaje još jedna promjena. Srećom, ovo je lako popraviti. Ako se vratimo na pravilo stila #wrapper, primijetit ćemo da deklaracija prijelaza izgleda ovako:
#wrapper (širina: 2200px; transformacija: translate3d (0, 0, 0); prijelaz: lijevo .5s jednostavnog ulaska;)
Naš prijelaz prati promjene lijevog svojstva. Više ne koristimo ovo svojstvo, tako da naš prijelaz ne može početi funkcionirati. Da biste ispravili ovu strašnu nepravdu, zamijenite lijevu ključnu riječ svojstva unutar deklaracije prijelaza ključnom riječi transform property:
#wrapper (širina: 2200px; transform: translate3d (0, 0, 0); prijelaz: transformacija .5s jednostavnog ulaska;)
Nakon što izvršite ove promjene, naš klizač će ponovno raditi na isti način kao i prije.
Jedina razlika je u tome što se hardversko ubrzanje sada koristi prilikom mijenjanja slajdova, a sada će biti glatkije i podržano na više uređaja.
Automatska promjena klizača u intervalima od nekoliko sekundi
Trenutačno se naši slajdovi mijenjaju samo kada kliknemo na jednu od navigacijskih poveznica. Ali ovo nije jedini način na koji klizač radi. Mnogi klizači sadržaja automatski se pomiču kroz sadržaj svakih nekoliko sekundi, a postoji i mogućnost skoka na određeni odjeljak pomoću navigacijskih veza.
Primjer jednog takvog klizača sadržaja koji vidite u nastavku:
Da, ovo je naš stari klizač s nekim manjim izmjenama tako da se sadržaj može automatski pomicati u spremniku. Pogodite što ćemo sljedeće učiniti?
Učinimo da se slajdovi automatski pomiču!
U tome će nam pomoći funkcija setInterval. Glavna svrha ove funkcije je osigurati da se kod izvršava u redovitim intervalima:
window.setInterval (functionToCall, kašnjenje);
Svakih nekoliko sekundi ( ili koliko ste postavili kao vrijednost intervala), funkcija setInterval govori našem klizaču da prijeđe na sljedeći blok sadržaja.
Kada je sadržaj gotov, klizač prolazi kroz petlju do početka sadržaja i počinje ispočetka. To se radi prilično lako. Sve što trebate znati je nekoliko trikova i dobro razumijevanje kako vaš klizač sadržaja radi.
Prva promjena koju trebamo napraviti je dodati dodatni kod potreban za obavljanje ovog posla. Na kraju koda koji već imate dodajte sljedeće retke:
// // Kod za automatsku promjenu slajdova // var timeoutID; funkcija startTimer () (// pričekajte 2 sekunde prije pozivanja goInactive timeoutID = window.setInterval (goToNextItem, 2000);) startTimer (); funkcija goToNextItem () (removeActiveLinks (); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }
Uskoro ćemo pogledati što znači sav ovaj kod. Sada dodajte sve ovo. Nakon što to učinite, pogledajte klizač sadržaja u pregledniku. Vidjet ćete kako se slajdovi sadržaja mijenjaju u spremniku svake dvije sekunde.
Ostala nam je samo jedna velika promjena koju trebamo napraviti. Slajdovi se sada rotiraju svake dvije sekunde, bez obzira na to jeste li kliknuli na navigacijsku vezu ili ne.
Bilo bi ispravnije učiniti tako da se nakon klika na jednu od veza mjerač vremena vrati na 0. Da biste izvršili ovu promjenu, dodajte sljedeći redak koda u rukovatelj događaja setClickedItem:
Nakon toga, klizač sadržaja ponašat će se prema očekivanjima kada uđete i kliknete na vezu za navigaciju. Ura!
Objašnjenje automatskih izmjena slajdova
Dakle, preostaje nam samo jedna stvar za rješavanje. Pogledajmo na brzinu kod koji smo upravo dodali i shvatimo zašto radi to što radi.
Počnimo s funkcijom goToNextItem / span>:
funkcija goToNextItem () (removeActiveLinks (); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}
Ova je funkcija odgovorna za praćenje sadržaja koji se trenutno prikazuje i onoga što slijedi. Da biste bolje razumjeli što se događa, pogledajte sliku ispod:
Varijabla activeLink označava poziciju trenutno prikazanog bloka sadržaja. Svaka informacija povezana je s odgovarajućim elementom unutar niza veza.
Ukupan broj elemenata unutar niza veza može se postaviti pomoću svojstva dužine. Vratimo se sada našem kodu.
Naredba if funkcije goToNextItem jednostavno provjerava ima li još sadržaja ili bi se klizač trebao vratiti na početak:
ako (aktivna veza< links.length - 1) { activeLink++; } else { activeLink = 0; }
Ako pažljivo pogledate dijagram i kod, razumjet ćete logiku. Uglavnom, nakon što dobijemo ispravnu vrijednost za activeLink, sve ostalo u našem klizaču će raditi magično.
Sama se čarolija postiže sa sljedeća dva retka koje osigurava funkcija changePosition, koja se zauzvrat poziva s pokazivačem na sljedeći blok sadržaja koji će se prikazati:
var newLink = veze; changePosition (newLink);
Trenutno se put kojim se naš kod obrađuje ne razlikuje od načina na koji je obrađen kada je veza ručno kliknuta.
Dakle... pogledali smo kod u funkciji goToNextItem za navigaciju do sljedećeg sadržaja. Za pozivanje ovog slajda automatski se koriste sljedeći redovi:
var timeoutID; funkcija startTimer () (// pričekajte 2 sekunde prije pozivanja goInactive timeoutID = window.setInterval (goToNextItem, 2000);) startTimer (); funkcija resetTimer () (window.clearInterval (timeoutID); startTimer ();)
Za pokretanje se koristi funkcija startTimer. Ova funkcija sadrži poziv setInterval, koji osigurava da se funkcija goToNextItem poziva svake 2 sekunde ( ili 2000 milisekundi).
Jednostavnim dodavanjem ove funkcije (i pozivanjem), učinit ćete da se vaš klizač sadržaja počne automatski pomicati kroz blokove sadržaja.
Ostaje samo shvatiti kako se timer resetuje ( koji sam nazvao setInterval) kada ručno kliknete vezu. Da bismo to riješili, koristi se ostatak našeg koda.
Metoda kojom se timer resetira je sljedeća: zaustavljamo funkciju setInterval i zatim je ponovno pokrećemo. Kako se to radi može biti malo teško shvatiti.
Spremamo identifikator pozvane funkcije setInterval, a zatim koristimo isti identifikator da bismo kasnije prestali pozivati istu funkciju setInterval. Da budem jasan.
Ovaj identifikator spremamo u varijablu timeoutID i inicijaliziramo ga u pozivu startTimer, a zgodno je koristiti isti identifikator unutar funkcije resetTimer:
funkcija resetTimer () (window.clearInterval (timeoutID); startTimer ();)
ClearInterval funkcija uzima identifikator (putem timeoutID) funkcije setInterval koju želimo zaustaviti.
Nakon što smo zaustavili timer unutar funkcije resetTimer, pozivamo startTimer i pokrećemo ga iznova:
funkcija resetTimer () (window.clearInterval (timeoutID); startTimer ();)
Logika je jednostavna. Mjerač vremena 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 na dvije sekunde prije nego što prijeđe na sljedeći blok. Funkcije startTimer i resetTimer prate sve to.
Zaključak
To je to, pokrili smo kako stvoriti prekrasan klizač sadržaja koristeći samo
HTML
CSS
i JavaScript. Osim toga, naučili ste kako postaviti neke promjene kako biste povećali performanse i pružili mogućnost automatske promjene blokova sadržaja.
Iako sam klizač nije definiran s toliko koda, moglo bi potrajati neko vrijeme da se razbiju koncepti koji stoje iza njega. U članku sam postavio poveznice na druge izvore koji pokrivaju teme koje sam dotaknuo samo površno. Možete ih pročitati kada za to budete imali vremena.
Klizači sadržaja dolaze u svim oblicima i veličinama. Neki se sastoje od nekoliko razina, gdje se sadržaj može mijenjati i okomito i vodoravno.
Neki klizači sadrže okomito poravnat sadržaj s blokovima naslaganim jedan na drugi. Ako ste prilično proaktivni i želite koristiti CSS umjesto prijelaza
Za početak, ovaj članak je napisan s ciljem da vam kaže kako stvoriti klizač za pomicanje slika za web stranice. Ovaj članak nipošto nije edukativne prirode, on služi samo kao primjer kako možete implementirati naš predmet razmatranja. Kôd iz ovog članka možete koristiti kao svojevrsni predložak za takav razvoj događaja, nadam se da ću čitatelju moći dovoljno detaljno i na pristupačan način prenijeti cijelu bit onoga što sam napisao.
A sada do točke, ne tako davno sam trebao staviti klizač na jedno mjesto, ali nakon pretraživanja interneta za gotovim skriptama, nisam našao ništa vrijedno truda. neki nisu radili kako sam trebao, dok drugi uopće nisu startali bez grešaka u konzoli. Koristiti jQuery - dodacičinilo mi se previše nezanimljivo za klizač, tk. Iako ću time riješiti problem, neću imati razumijevanja za rad ovog mehanizma, a korištenje dodatka radi jednog klizača nije baš optimalno. Nisam baš htio razumjeti krive skripte, zato sam odlučio napisati svoju skriptu za klizač, koju ću sam označiti kako mi treba.
Za početak, moramo odlučiti o logici samog klizača, a zatim nastaviti s implementacijom, u ovoj fazi vrlo je važno imati jasno razumijevanje rada ovog mehanizma, jer bez njega ne možemo napisati kod koji radi točno onako kako želimo.
Naš glavni cilj bit će okvir za prikaz, odnosno blok u kojem ćemo vidjeti kako nam se slike vrte, u njemu ćemo imati omotač slajdova, to će biti naš blok koji će sadržavati sve slike, poredane u jedan red, i koji će promijeniti svoju poziciju unutar samog okvir za prikaz.
Nadalje, na stranama iznutra okvir za prikaz, okomito u sredini, nalazit će se gumbi za nazad i naprijed, klikom na koje ćemo također promijeniti položaj našeg omotač slajdova relativno okvir za prikaz, što uzrokuje efekt pomicanja kroz slike. I na kraju, zadnji objekt bit će naši navigacijski gumbi koji se nalaze pri dnu. okvir za prikaz.
Kada kliknemo na njih, jednostavno ćemo pogledati serijski broj ovog gumba i prijeći na slajd koji nam je potreban, opet pomicanjem omotač slajdova(pomak će se izvršiti kroz promjenu transformirati css svojstva, čija će se vrijednost stalno izračunavati).
Mislim da bi logika cijelog ovog slučaja trebala biti jasna nakon ovoga što sam gore naveo, ali ako još negdje bude nesporazuma, onda će se sve raščistiti u kodu ispod, samo treba malo strpljenja.
Ajmo sad pisati! Prije svega, otvorit ćemo naše indeksnu datoteku i tamo napiši oznaku koja nam je potrebna:
Kao što vidite, ništa komplicirano blok-za-klizač služi kao isti blok u koji će biti smješten naš klizač, unutar njega samog okvir za prikaz u kojoj naš omotač slajdova, aka ugniježđena lista, ovdje li su slajdovi i img- slike unutar njih. Obratite pažnju na činjenicu da sve slike moraju biti iste veličine ili barem proporcija, inače će klizač izgledati krivo, tk. njegove dimenzije izravno ovise o omjeru slike.
Sad trebamo stilizirati cijelu ovu stvar, obično se stilovi baš i ne komentiraju, ali odlučila sam skrenuti pozornost na to, kako ubuduće ne bi bilo nesporazuma.
tijelo (margina: 0; padding: 0;) # block-for-slider (width: 800px; margin: 0 auto; margin-top: 100px;) #viewport (width: 100%; display: table; position: relative; overflow: skriven; -webkit-user-select: nema; -moz-user-select: nema; -ms-user-select: nema; -o-user-select: nema; user-select: nema;) #slidewrapper ( položaj: relativan; širina: izračun (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: izračun (100% / 4); stil popisa: nijedan; prikaz: umetnuti; float: lijevo;) .slide-img (širina: 100%;)
Počnimo s blok-za-klizač, ovo je, opet, naš blok na stranici, koji ćemo izdvojiti za klizač, njegova visina ovisit će o njegovoj širini i o proporcijama naše slike, budući da okvir za prikaz zauzima cijelu širinu blok-za-klizač zatim sebe slajd ima istu širinu, te, sukladno tome, slika unutar nje mijenja svoju visinu ovisno o širini (očuvane su proporcije). Postavio sam ovaj element vodoravno u sredinu svoje stranice, dodajući 100px od vrha, čineći njegovu poziciju prikladnijom za primjer.
Element okvir za prikaz, kao što je već spomenuto, zauzima cijelu širinu našeg blok-za-klizač, ima svojstvo prelijevanje: skriveno, omogućit će nam da sakrijemo naš feed slike koji će iskočiti iz okvira za prikaz. 
Slijedeći css svojstvo - odabir korisnika: nema, omogućuje vam da se riješite plavog odabira pojedinačnih elemenata klizača s višestrukim klikovima na gumbe.
Prelazimo na omotač slajdova zašto položaj: relativan, ali ne apsolutna? Sve je vrlo jednostavno, tk. ako odaberemo drugu opciju, onda sa svojstvom preljev okvira prikaza: skriven apsolutno ništa nam se neće činiti, tk. sebe okvir za prikaz neće se prilagoditi visini omotač slajdova, zbog onoga što će imati visina: 0... Zašto je širina toliko bitna i zašto je uopće postavljamo? Činjenica je da će naši slajdovi imati širinu jednaku 100% okvira za prikaz, a da bismo ih posložili u liniju potrebno nam je mjesto na kojem će stajati, dakle širina omotač slajdova trebao biti jednak 100% širina okvira za prikaz pomnoženo s brojem slajdova (u mom slučaju, 4). O tranzicija i prijelazna-vremenska-funkcija onda ovdje 1s znači da promjena položaja omotač slajdova dogodit će se unutar 1 sekunde i mi ćemo to promatrati, i jednostavnost ulaska- vrsta animacije u kojoj prvo ide polako, ubrzava do sredine, a zatim opet usporava, ovdje već možete podesiti vrijednosti prema vlastitom nahođenju.
Sljedeći blok skupova svojstava omotač slajdova a njegova djeca nemaju padding, komentari su ovdje nepotrebni.
Zatim ćemo stilizirati naše slajdove, njihova širina treba biti jednaka širini. okvir za prikaz, ali pošto oni su unutra omotač slajdova, čija je širina jednaka širini okvira za prikaz pomnoženoj s brojem slajdova, a zatim da biste dobili širinu okvir za prikaz opet nam treba 100% širine omotač slajdova podijelite s brojem slajdova (u mom slučaju, opet, s 4). Zatim ih pretvaramo u inline elemente pomoću zaslon: inline i postavite tok ulijevo dodavanjem svojstva plutati: lijevo... Oko stil liste: nema Mogu reći da ga koristim za uklanjanje zadanog markera li, u većini slučajeva je svojevrsni standard.
S slide-img sve je jednostavno, slika će zauzeti cijelu širinu slajd, slajd prilagođava se svojoj visini, omotač slajdova prilagođava visini slajd, i visina okvir za prikaz zauzvrat će uzeti vrijednost visine omotač slajdova, stoga će visina našeg klizača ovisiti o omjeru slike i veličini bloka predviđenog za klizač, o čemu sam već pisao gore.
Mislim da smo ovdje shvatili stilove, napravimo jednostavnu slide show bez gumba za sada, a nakon što se uvjerimo da radi kako treba, dodajmo ih i stiliziramo.
Otvorimo naše js datoteku, koji će sadržavati kod klizača, ne zaboravite uključiti jQuery od pisat ćemo koristeći ovaj okvir. Usput, u vrijeme pisanja ovog teksta koristim verziju jQuery 3.1.0... Datoteka sa samom skriptom mora biti uključena na samom kraju oznake tijelo od radit ćemo s 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 okvir za prikaz, dao sam joj ime slideNow, a drugi će pohraniti broj tih istih slajdova, to jest slideCount.
var slideNow = 1; var slideCount = $ ("# slidewrapper"). djeca (). dužina);
Varijabilna slideNow potrebno je postaviti početnu vrijednost 1, jer kada se stranica učita, mi ćemo, na temelju naše oznake, vidjeti prvi slajd okvir za prikaz.
V slideCount stavit ćemo broj djece omotač slajdova, ovdje je sve logično.
Zatim morate stvoriti funkciju koja će biti odgovorna za prebacivanje slajdova s desna na lijevo, mi ćemo je proglasiti:
funkcija nextSlide () ()
Nazvat ćemo ga u glavnom bloku našeg koda, do kojeg ćemo doći, ali za sada ćemo našoj funkciji reći što treba učiniti:
funkcija nextSlide () (if (slideNow == slideCount || slideNow<= 0 || 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 jesmo li sada na zadnjem slajdu našeg feeda? Da bismo to učinili, uzimamo broj svih naših slajdova koje koristimo $ ("# slidewrapper"). djeca (). dužina i provjerite s brojem našeg slajda, ako se pokaže da su jednaki, to znači da moramo ponovno početi prikazivati vrpcu, od 1 slajda, što znači da mijenjamo svojstvo css transformacije na omotač slajdova na prevedi (0, 0), pomičući ga tako u prvobitni položaj tako da se prvi slajd pojavi u našem vidnom polju, ne zaboravite također na –Webkit i –ms za adekvatan prikaz u više preglednika (vidi. referenca css svojstava). Nakon toga, ne zaboravimo ažurirati vrijednost varijable. slideNow, obavještavajući je da je slajd broj 1 u njenom vidnom polju: slideNow = 1;
Isti uvjet uključuje provjeru da je broj slajda koji vidimo unutar broja naših slajdova, ali ako to nekako nije ispunjeno, vraćamo se na 1. slajd.
Ako prvi uvjet nije ispunjen, to znači da trenutno nismo na zadnjem slajdu, ili na nekom nepostojećem, što znači da trebamo prijeći na sljedeći, to ćemo učiniti pomicanjem omotač slajdova lijevo za vrijednost jednaku širini okvir za prikaz, pomak će se ponovno dogoditi kroz poznato svojstvo Prevedičija će vrijednost biti jednaka "translate (" + translateWidth + "px, 0)", gdje translateWidth- udaljenost kojom naš omotač slajdova... Usput, deklarirajmo ovu varijablu na početku našeg koda:
var translateWidth = 0;
Nakon prelaska na sljedeći slajd, recite našem slajdu Sada da vidimo sljedeći slajd: slideNow ++;
U ovom trenutku, neki čitatelji mogu imati pitanje: zašto nismo zamijenili $ ("# viewport"). width () na neku varijablu, na primjer širina slajda da uvijek imamo pri ruci širinu našeg tobogana? Odgovor je vrlo jednostavan, ako je naša stranica responzivna, tada je, sukladno tome, blok dodijeljen za klizač također prilagodljiv, iz toga se može razumjeti da pri promjeni veličine širine prozora bez ponovnog učitavanja stranice (na primjer, okretanje telefon postrance), širina okvir za prikaz promijenit će se, a prema tome će se promijeniti i širina jednog slajda. U ovom slučaju naš omotač slajdova bit će pomaknuta za vrijednost širine koja je izvorno bila, što znači da će slike biti prikazane u dijelovima ili uopće neće biti prikazane u okvir za prikaz... Pisanjem na našu funkciju $ ("# viewport"). width () umjesto širina slajda natjeramo ga da izračuna širinu svaki put kada mijenjamo slajdove okvir za prikaz, čime se omogućuje pomicanje do željenog slajda kada se širina zaslona naglo promijeni.
No, funkciju smo napisali, sada je trebamo pozvati nakon određenog vremenskog intervala, interval možemo pohraniti i u varijablu, tako da ako ga želimo promijeniti, promijenimo samo jednu vrijednost u kodu:
var slideInterval = 2000;
Vrijeme u js je navedeno u milisekundama.
Sada napišimo sljedeću konstrukciju:
$ (dokument) .spreman (funkcija () (setInterval (nextSlide, slideInterval);));
Sve nije nigdje lakše, mi smo u izgradnji $ (dokument) .spreman (funkcija () ()) kažemo da se sljedeće radnje moraju izvesti nakon što se dokument potpuno učita. Tada samo pozivamo funkciju nextSlide s intervalom jednakim slideInterval, pomoću ugrađene funkcije setInterval.
Nakon svih radnji koje smo izveli iznad, naš klizač bi se trebao dobro vrtjeti, ali ako je nešto pošlo po zlu s vama, problem može biti ili u verziji jQuery, ili u pogrešnom povezivanju bilo koje datoteke. Također, nije potrebno isključiti da ste negdje u kodu mogli pogriješiti, pa vam mogu samo savjetovati da sve još jednom provjerite. 
U međuvremenu, nastavite, dodajte na naš klizač funkciju kao što je zaustavljanje pomicanja pri lebdenju, za to moramo napisati u glavni blok koda (unutar $ (dokument) .ready (funkcija () ())) takva stvar:
$ ("# viewport"). lebdjeti (funkcija () (clearInterval (switchInterval);), funkcija () (switchInterval = setInterval (nextSlide, slideInterval);));
Da bismo počeli analizirati ovaj kod, moramo znati što je switchInterval... Prvo, ovo je varijabla koja pohranjuje periodični poziv funkcije nextSlide, pojednostavljeno rečeno, koristimo ovaj redak koda: setInterval (nextSlide, slideInterval);, pretvorio se u ovo: switchInterval = setInterval (nextSlide, slideInterval);... Nakon ovih manipulacija, naš glavni blok koda dobio je sljedeći oblik:
$ (dokument) .ready (funkcija () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport"). lebdeći (funkcija () (clearInterval (switchInterval);), funkcija () (switchInterval = setInterval ( nextSlide, slideInterval;));));
Ovdje koristim događaj lebdjeti, što znači "pri lebdenju", ovaj mi događaj omogućuje da pratim trenutak kada pređem iznad objekta, u ovom slučaju na okvir za prikaz.
Nakon što lebdim, brišem razmak koji ću navesti u zagradama (ovo je naš switchInterval), zatim, odvojeno zarezima, napišem što ću učiniti kada pomaknem pokazivač unatrag, u ovom bloku opet dodjeljujem našem switchInterval periodični poziv funkcije nextSlide.
Sada, ako provjerimo, vidjet ćemo kako naš klizač reagira na lebdenje mišem, zaustavljajući prebacivanje slajda.
Sada je vrijeme za dodavanje gumba našem klizaču, počnimo s gumbima naprijed i natrag.
Prije svega, označimo ih:
U početku, ova oznaka može biti nerazumljiva, odmah ću reći da sam ova dva gumba zamotao u jedan razd s razredom prev-next-btns samo radi vaše udobnosti, ne morate to učiniti, rezultat se neće promijeniti, sada ćemo im dodati stilove i sve će postati jasno:
# prev-btn, # next-btn (položaj: apsolutna; širina: 50px; visina: 50px; boja pozadine: #fff; radijus granice: 50%; vrh: izračun (50% - 25px);) # prev- btn: lebdjeti, # next-btn: lebdjeti (kursor: pokazivač;) # prev-btn (lijevo: 20px;) # next-btn (desno: 20px;)
Prvo, pozicioniramo naše gumbe preko pozicija: apsolutna, time ćemo slobodno kontrolirati njihov položaj unutar naše okvir za prikaz, tada ćemo navesti veličine ovih gumba i korištenje granica-radijus zaokružite kutove tako da se ti gumbi pretvore u krugove. Boja će im biti bijela, tj #F F F, i njihovo uvlačenje od gornjeg ruba okvir za prikaz bit će jednak polovici visine ovog okvir za prikaz minus polovica visine samog gumba (u mom slučaju 25px) tako da ih možemo postaviti okomito u sredinu. Zatim ćemo naznačiti da će se naš kursor promijeniti u, kada pređemo iznad njih pokazivač i konačno recite našim gumbima pojedinačno da uvuku 20px od svojih rubova tako da ih možemo vidjeti kako nam odgovara.
Opet, možete stilizirati elemente stranice kako god želite, ja samo dajem primjer stilova koje sam odlučio koristiti.
Nakon stiliziranja, naš klizač bi trebao izgledati otprilike ovako: 
Zatim se vratite na naše js datoteku gdje opisujemo kako rade naši gumbi. Pa, dodajmo još jednu funkciju, ona će nam pokazati prethodni slajd:
funkcija prevSlide () (ako (slideNow == 1 || slideNow<= 0 || 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--;))
To se zove prevSlide, bit će pozvan samo kada kliknete na prev-btn... Prvo provjeravamo jesmo li na 1. slajdu ili ne, ovdje također provjeravamo jesmo li na našem slideNow izvan granica stvarnog raspona naših slajdova i, ako bilo koji od uvjeta funkcionira, prijeći ćemo na zadnji slajd pomicanjem omotač slajdova na vrijednost koja nam je potrebna. Ovu vrijednost izračunat ćemo po formuli: (širina jednog slajda) * (broj slajdova - 1), sve to uzimamo sa predznakom minus, budući da pomaknemo ga ulijevo, ispada da okvir za prikaz sada će nam pokazati posljednji slajd. Na kraju ovog bloka također trebamo reći varijablu slideNow da je posljednji slajd sada u našem vidnom polju.
Ako nismo na prvom slajdu, onda se moramo pomaknuti za 1 unatrag, za to opet mijenjamo svojstvo transformirati za slidewrapper... Formula je sljedeća: (širina jednog slajda) * (broj trenutnog slajda - 2), opet, sve ovo uzimamo sa predznakom minus. Ali zašto je -2, a ne -1, trebamo li pomaknuti samo 1 slajd unatrag? Činjenica je da ako smo, recimo, na 2. slajdu, onda je varijabla x Svojstva transformirati: prevesti (x, 0) naše omotač slajdova već je jednaka širini jednog slajda, ako mu kažemo da trebamo oduzeti 1 od broja trenutnog slajda, onda ćemo opet dobiti jedinicu za koju je već pomaknut omotač slajdova, pa ćete morati pomaknuti ove širine za 0 okvir za prikaz, što znači na slideNow - 2.
Sada samo trebamo dodati ove retke glavnom bloku koda:
$ ("# next-btn"). kliknite (funkcija () (nextSlide ();)); $ ("# prev-btn"). kliknite (funkcija () (prevSlide ();));
Ovdje samo pratimo je li napravljen klik na naše gumbe, a u ovom slučaju pozivamo funkcije koje su nam potrebne, sve je jednostavno i logično.
Sada dodajmo gumbe za navigaciju slajdova, natrag na oznake:
Kao što vidite, iznutra okvir za prikaz pojavio se ugniježđeni popis, dajte mu identifikator nav-btns, unutar li- naše navigacijske tipke, dodijelit ćemo im klasu slide-nav-btn, međutim, možemo završiti s označavanjem, prijeđimo na stilove:
# nav-btns (položaj: apsolutna; širina: 100%; dno: 20px; padding: 0; margina: 0; text-align: centar;) .slide-nav-btn (položaj: relativan; prikaz: inline-block; stil liste: nema; širina: 20px; visina: 20px; boja pozadine: #fff; radijus obruba: 50%; margina: 3px;) .slide-nav-btn: lebdenje (kursor: pokazivač;)
Blok nav-btns, u kojem se nalaze naši gumbi, dajemo svojstvo pozicija: apsolutna, tako da se ne rasteže okvir za prikaz u visinu, jer na omotač slajdova imovine položaj: relativan, postavljamo širinu na 100% tako da korištenjem poravnavanje teksta: središte središnji gumbi vodoravno relativni okvir za prikaz, a zatim koristeći svojstvo dno jasno stavljamo do znanja našem bloku da bi trebao biti na udaljenosti od 20px od donjeg ruba.
S gumbima radimo isto kao i sa slajdovima, ali sada ih postavljamo zaslon: inline-block od na zaslon: inline ne reagiraju na širina i visina od nalaze se u apsolutno pozicioniranom bloku. Napravit ćemo ih bijelim i uz pomoć već nam poznatih granica-radijus dajmo im oblik kruga. Kada zadržite pokazivač iznad njih, promijenit ćemo izgled našeg kursora za uobičajeni prikaz.
A sada prijeđimo na jQuery - dijelovi:
Prvo, deklarirajmo varijablu navBtnId, koja će pohraniti indeks gumba na koji smo kliknuli:
var navBtnId = 0;
$ (". slide-nav-btn"). kliknite (funkcija () (navBtnId = $ (ovo) .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;)));
Evo nas kad kliknemo na naše slide-nav-btn zovemo funkciju, koja prije svega dodjeljuje varijabli navBtnId indeks kliknutog gumba, odnosno njegov redni broj, budući da brojanje počinje od nule, onda ako kliknemo na drugi gumb, onda u navBtnId vrijednost je napisana 1. Zatim radimo provjeru, gdje serijskom broju gumba dodajemo jedan kako bismo dobili takav broj kao da odbrojavanje nije od 0, nego od 1, uspoređujemo ovaj broj s brojem trenutni slajd, ako se poklapaju, nećemo ništa poduzeti jer je željeni slajd već u okvir za prikaz.
Ako tobogan koji nam treba nije na vidiku okvir za prikaz, zatim izračunamo udaljenost za koju se trebamo pomaknuti omotač slajdova lijevo, a zatim promijenite vrijednost css svojstva transformacije na translate(ista udaljenost u pikselima, 0). To smo već učinili više puta, tako da ne bi trebalo biti pitanja. Na kraju ponovno spremamo vrijednost trenutnog slajda u varijablu. slideNow, ova se vrijednost može izračunati dodavanjem jedan indeksu kliknutog gumba.
To je sve, zapravo, ako nešto nije jasno, onda ostavljam poveznicu na jsfiddle, gdje će biti naveden sav kod napisan u materijalu.
Hvala na pažnji!
Oznake:
- jquery klizač
- css
- css3 animacija
- html
