Bërja e një rrëshqitësi në JavaScript me duart tuaja. Rrëshqitësi i personalizuar i imazhit duke përdorur jQuery

Nëse keni nevojë të shtoni një rrëshqitës imazhi jQuery me cilësi të lartë në faqen tuaj, atëherë në këtë artikull do të gjeni një përshkrim të shtojcave të nevojshme. Edhe pse JQuery e ka bërë shumë më të lehtë punën me JavaScript, ne kemi ende nevojë për shtojca për të përshpejtuar procesin e dizajnimit të uebit.

Ne mund të bëjmë ndryshime në disa prej këtyre shtojcave dhe të krijojmë rrëshqitës të rinj që janë shumë më të përshtatshëm për qëllimet e faqes sonë.

Për rrëshqitës të tjerë, thjesht shtoni tituj, imazhe dhe zgjidhni efektet e tranzicionit të rrëshqitjes që vijnë me rrëshqitësin. Të gjitha këto shtojca shoqërohen me dokumentacion të detajuar, kështu që shtimi i efekteve ose funksioneve të reja në to nuk do të jetë i vështirë. Ju madje mund të ndryshoni shkaktarët e bazuar në ngjarje nëse jeni një programues me përvojë në JQuery.

Tendencat e fundit si dizajni i përgjegjshëm janë shumë të rëndësishëm për projektet në ueb, pavarësisht nëse jeni duke zbatuar një plugin ose një skript. Të gjithë këta elementë e bëjnë secilën prej këtyre shtojcave shumë fleksibël. Gjithçka që doli në 2014 është përfshirë në këtë listë.

Rrëshqitësit e imazhit JQuery Jssor rrëshqitës i përgjegjshëm

Kohët e fundit kam hasur në këtë rrëshqitës të fuqishëm jQuery dhe kam mundur të shoh nga dora e parë se ai e bën punën e tij shumë mirë. Ai përmban mundësi të pakufishme që mund të zgjerohen përmes kodit me burim të hapur të rrëshqitësit:

• Dizajn adaptiv;
• Më shumë se 15 opsione personalizimi;
• Më shumë se 15 efekte të ndryshimit të imazhit;
• Galeria e imazheve, karusel, mbështetje për madhësinë e ekranit të plotë;
• Rotator vertikal i banerit, lista e rrëshqitjeve;
• Mbështetje për video.

Demo | Shkarko

PgwSlider - rrëshqitës i përgjegjshëm i bazuar në JQuery / Zepto

Detyra e vetme e kësaj shtojce është të shfaqë rrëshqitje të imazheve. Është shumë kompakt, pasi skedarët JQuery janë vetëm 2.5 KB në madhësi, gjë që e lejon atë të ngarkohet shumë shpejt:

• Struktura adaptive;
• optimizimi i SEO;
• Mbështetje për shfletues të ndryshëm;
• Tranzicione të thjeshta të imazhit;
• Madhësia e arkivit është vetëm 2.5 KB.

Demo | Shkarko

Rrëshqitësi vertikal i lajmeve Jquery

Një rrëshqitës fleksibël dhe i dobishëm JQuery i krijuar për burimet e lajmeve me një listë publikimesh në anën e majtë dhe një imazh të shfaqur në të djathtë:

• Dizajn adaptiv;
• Kolona vertikale për ndërrimin e lajmeve;
• Titujt e zgjeruar.

Demo | Shkarko

Wallop Slider

Ky rrëshqitës nuk përmban jQuery, por unë do të doja ta paraqes atë pasi është shumë kompakt dhe mund të zvogëlojë ndjeshëm kohën e ngarkimit të faqes. Më tregoni nëse ju pëlqen:

• Struktura adaptive;
• Dizajn i thjeshtë;
• Opsione të ndryshme për ndryshimin e rrëshqitjes;
• Kodi minimal JavaScript;
• Madhësia është vetëm 3 KB.

Demo | Shkarko

Galeria Polaroid e stilit të sheshtë

Një galeri e stilit të shpërndarë me dokumente mbi një tavolinë me një plan urbanistik fleksibël dhe dizajn të bukur duhet të jetë me interes për shumë prej jush. Më i përshtatshëm për tableta dhe ekrane të mëdhenj:

• Rrëshqitës përshtatës;
• Dizajn i sheshtë;
• Ndryshimi i rastësishëm i rrëshqitjes;
• Qasje e plotë në kodin burimor.

Demo | Shkarko

A-Rrëshqitës

Demo | Shkarko

HiSlider – HTML5, jQuery dhe rrëshqitës i imazhit të WordPress

HiSlider ka prezantuar një shtojcë të re pa pagesë jQuery rrëshqitës me të cilën mund të krijoni një shumëllojshmëri galerish imazhesh me tranzicione fantastike:

• Rrëshqitës përshtatës;
• Nuk kërkon njohuri programore;
• Disa shabllone dhe lëkura të mahnitshme;
• Efekte të bukura të tranzicionit;
• Mbështetje për platforma të ndryshme;
• E përputhshme me WordPress, Joomla, Drupal;
• Aftësia për të shfaqur lloje të ndryshme të përmbajtjes: imazhe, video në YouTube dhe video Vimeo;
• Konfigurimi fleksibël;
• Karakteristikat shtesë të dobishme;
• Sasi e pakufizuar e përmbajtjes së shfaqur.

Demo |Shkarko

Wow Slider

WOW Slider është një rrëshqitës imazhi i përgjegjshëm jQuery me efekte vizuale të mahnitshme (domino, rrotullim, turbullim, rrokullisje dhe ndezje, fluturim jashtë, blinds) dhe shabllone profesionale.

WOW Slider vjen me një magjistar instalimi që ju lejon të krijoni rrëshqitës fantastikë në sekonda pa pasur nevojë të kuptoni kodin ose të modifikoni imazhet. Versionet e shtojcës për Joomla dhe WordPress janë gjithashtu të disponueshme për shkarkim:

• Plotësisht i përgjegjshëm;
• Mbështet të gjithë shfletuesit dhe të gjitha llojet e pajisjeve;
• Mbështetje për pajisjet me prekje;
• Instalim i lehtë në WordPress;
• Fleksibilitet në konfigurim;
• SEO-optimizuar.

Demo |Shkarko

Nivo Slider – shtojcë falas jQuery

Nivo Slider njihet në të gjithë botën si rrëshqitësi më i bukur dhe më i lehtë për t'u përdorur i imazhit. Shtojca Nivo Slider është falas dhe lëshohet nën licencën MIT:

• Kërkon JQuery 1.7 dhe më lart;
• Efekte të bukura të tranzicionit;
• E thjeshtë dhe fleksibël për t'u konfiguruar;
• Kompakte dhe adaptive;
• Burim i hapur;
• E fuqishme dhe e thjeshtë;
• Disa shabllone të ndryshme;
• Prerja automatike e imazhit.

Demo |Shkarko

Rrëshqitësi i thjeshtë jQuery me dokumentacion teknik

Ideja u frymëzua nga rrëshqitësit e Apple, në të cilët disa elementë të vegjël mund të fluturojnë me efekte të ndryshme animacioni. Zhvilluesit u përpoqën të zbatonin këtë koncept, duke marrë parasysh kërkesat minimale për krijimin e një dizajni të thjeshtë të dyqanit në internet, në të cilin elementët "fluturues" përfaqësojnë kategori të ndryshme:

• Struktura adaptive;
• Dizajn minimalist;
• Efekte të ndryshme të braktisjes dhe ndryshimit të rrëshqitjes.

Demo |Shkarko

Rrëshqitësi i imazhit jQuery me madhësi të plotë

Një rrëshqitës shumë i thjeshtë që zë 100% të gjerësisë së faqes dhe përshtatet me madhësitë e ekranit të pajisjeve mobile. Funksionon me tranzicione CSS dhe imazhet "vendosen" së bashku me ankorat. Spiranca mund të zëvendësohet ose hiqet nëse nuk dëshironi të bashkëngjitni një lidhje me imazhin.

Kur instalohet, rrëshqitësi zgjerohet në 100% të gjerësisë së ekranit. Ai gjithashtu mund të zvogëlojë automatikisht madhësinë e imazheve të rrëshqitjes:

• Rrëshqitësi përshtatës JQuery;
• Madhësia e plotë;
• Dizajn minimalist.

Demo |Shkarko

Elastic Content Slider + tutorial

Elastic Content Slider rregullon automatikisht gjerësinë dhe lartësinë bazuar në dimensionet e elementit prind. Ky është një rrëshqitës i thjeshtë jQuery. Ai përbëhet nga një zonë rrëshqitëse në krye dhe një shirit me skedë navigimi në fund. Rrëshqitësi rregullon gjerësinë dhe lartësinë e tij sipas dimensioneve të kontejnerit mëmë.

Kur shikohen në ekrane të vogla diagonale, skedat e navigimit shndërrohen në ikona të vogla:

• Dizajn adaptiv;
• Lëvizja e klikimit të miut.

Demo |Shkarko

Rrëshqitës 3D Stack Falas

Një rrëshqitës eksperimental që lëviz nëpër imazhe në 3D. Dy rafte ngjajnë me pirgje letre, nga të cilat, kur lëvizni, imazhet shfaqen në qendër të rrëshqitësit:

• Dizajn adaptiv;
• Flip - tranzicion;
• efektet 3D.

Demo |Shkarko

Slider Slider me ekran të plotë bazuar në udhëzuesin JQuery dhe CSS3 +

Ky tutorial do t'ju tregojë se si të krijoni një rrëshqitës me një kthesë: ideja është të "preni" dhe të shfaqni rrëshqitjen aktuale ndërsa hapni imazhin tjetër ose të mëparshëm. Duke përdorur animacionin JQuery dhe CSS, ne mund të krijojmë efekte unike të tranzicionit:

• Dizajn adaptiv;
• Tranzicioni i ndarë;
• Rrëshqitësi i ekranit të plotë.

Demo |Shkarko

Unislider - një rrëshqitës shumë i vogël jQuery

Nuk ka zile dhe bilbila të panevojshme, më pak se 3 KB në madhësi. Përdorni çdo kod HTML për rrëshqitjet tuaja, zgjeroni atë me CSS. Gjithçka që lidhet me Unslider është pritur në GitHub:

• Mbështetje për shfletues të ndryshëm;
• Mbështetje për tastierë;
• Rregullimi i lartësisë;
• Dizajn adaptiv;
• Mbështetja e hyrjes me prekje.

Demo | Shkarko

Slides Minimal Responsive

Një shtesë e thjeshtë dhe kompakte (me madhësi vetëm 1 KB) që krijon një rrëshqitës të përgjegjshëm duke përdorur elementë brenda një kontejneri. ResponsiveSLides.js punon me një gamë të gjerë shfletuesish, duke përfshirë të gjitha versionet e IE nga IE6 dhe më lart:

• Plotësisht i përgjegjshëm;
• Madhësia 1 KB;
• Tranzicionet CSS3 me aftësinë për të ekzekutuar përmes JavaScript;
• Shënim i thjeshtë duke përdorur lista me pika;
• Aftësia për të personalizuar efektet e tranzicionit dhe kohëzgjatjen e shikimit të një rrëshqitjeje;
• Mbështet aftësinë për të krijuar shfaqje të shumta rrëshqitëse;
• Lëvizje automatike dhe manuale.

Demo |Shkarko

Kamera - rrëshqitës pa pagesë jQuery

Kamera është një shtojcë me shumë efekte tranzicioni dhe një plan urbanistik të përgjegjshëm. Lehtë për t'u konfiguruar, e mbështetur nga pajisjet celulare:

• Dizajn plotësisht i përgjegjshëm;
• Nënshkrimet;
• Aftësia për të shtuar video;
• 33 ikona me ngjyra të ndryshme.

Demo |Shkarko

SlidesJS, shtojcë e përgjegjshme jQuery

SlidesJS është një shtesë e përgjegjshme për JQuery (1.7.1 dhe më lart) me mbështetje për pajisjet me prekje dhe tranzicionet CSS3. Eksperimentoni me të, provoni disa shembuj të gatshëm që do t'ju ndihmojnë të kuptoni se si të shtoni SlidesJS në projektin tuaj:

• Dizajn adaptiv;
• tranzicionet CSS3;
• Mbështetje për pajisjet me prekje;
• Lehtë për t'u vendosur.

Demo | Shkarko

BX Jquery Slider

Ky është një rrëshqitës pa pagesë i përgjegjshëm jQuery:

• Plotësisht i përgjegjshëm - përshtatet me çdo pajisje;
• Ndryshimi horizontal, vertikal i rrëshqitjes;
• Slides mund të përmbajnë imazhe, video ose përmbajtje HTML;
• Mbështetje e zgjeruar për pajisjet me prekje;
• Përdorimi i tranzicioneve CSS për animimin e rrëshqitjes (përshpejtimi i harduerit);
• Callback API dhe metoda plotësisht publike;
• Madhësia e vogël e skedarit;
• Lehtë për t'u zbatuar.

Demo |Shkarko

FlexSlider 2

Rrëshqitësi më i mirë i përgjegjshëm. Versioni i ri është përmirësuar për të rritur shpejtësinë dhe kompaktësinë.

Demo | Shkarko

Galeria - Galeria e fotografive e përgjegjshme e bazuar në JavaScript

Galleria përdoret në miliona faqe interneti për të krijuar galeri imazhesh me cilësi të lartë. Numri i vlerësimeve pozitive për punën e saj është thjesht jashtë grafikëve:

• Plotësisht falas;
• Mënyra e shikimit në ekran të plotë;
• 100% adaptive;
• Nuk kërkohet përvojë në programim;
• Mbështetje për iPhone, iPad dhe pajisje të tjera me prekje;
• Flickr, Vimeo, YouTube dhe më shumë;
• Disa tema.

Demo | Shkarko

Blueberry - një rrëshqitës i thjeshtë imazhi i përgjegjshëm jQuery

Unë ju prezantoj një rrëshqitës imazhi jQuery të shkruar posaçërisht për dizajn të përgjegjshëm të uebit. Blueberry është një shtojcë eksperimentale e rrëshqitësit të imazhit me burim të hapur që është shkruar posaçërisht për të punuar me shabllone të përgjegjshme:

• Dizajn minimal;
• Struktura adaptive;
• Prezantimet.

Demo | Shkarko

jQuery Popeye 2.1

Përdoren elementë standardë të versionit të parë të programit: rrëshqitësi fshihet në të majtë dhe shfaqet në të djathtë. Të njëjtat elementë lundrimi dhe titrat që shfaqen në lëvizjen e miut:

• Dizajn adaptiv;
• Mbështetja e nënshkrimit;
• Modaliteti i shfaqjes së rrëshqitjes.

Demo | Shkarko

1. Slideshow i shkëlqyer jQuery

Një slideshow i madh, spektakolar duke përdorur teknologjitë jQuery.

2. Shtojca jQuery "Scale Carousel"

Slideshow i shkallëzuar duke përdorur jQuery. Mund të vendosni përmasat e shfaqjes së rrëshqitjes që ju përshtaten më mirë.

3. Shtojca jQuery "slideJS"

Rrëshqitësi i imazhit me përshkrim teksti.

4. Shtojca "JSliderNews"

5. Rrëshqitësi CSS3 jQuery

Kur rri pezull mbi shigjetat e navigimit, shfaqet një miniaturë rrethore e rrëshqitjes tjetër.

6. Rrëshqitësi i bukur i jQuery "Cikli i prezantimit".

Rrëshqitësi jQuery me tregues të ngarkimit të imazhit. Ofrohet ndryshimi automatik i rrëshqitjes.

7. Shtojca jQuery "Parallax Slider"

Rrëshqitës me një efekt sfondi vëllimor. Pika kryesore e këtij rrëshqitësi është lëvizja e sfondit, i cili përbëhet nga disa shtresa, secila prej të cilave lëviz me një shpejtësi të ndryshme. Rezultati është një imitim i efektit vëllimor. Duket shumë bukur, mund ta shihni vetë. Efekti shfaqet më mirë në shfletues të tillë si Opera, Google Chrome, IE.

8. Rrëshqitësi i freskët dhe i lehtë jQuery "bxSlider 3.0"

Në faqen demo në seksionin "shembuj" mund të gjeni lidhje për të gjitha përdorimet e mundshme të kësaj shtojce.

9. Rrëshqitësi i imazhit jQuery, shtojca “slideJS”.

Një rrëshqitës elegant jQuery sigurisht që mund të dekorojë projektin tuaj.

10. Shtojca e paraqitjes së rrëshqitjes jQuery "Easy Slides" v1.1

Një shtojcë e lehtë për t'u përdorur jQuery për krijimin e shfaqjeve rrëshqitëse.

11. Shtojca jQuery Slidy

Shtojcë e lehtë jQuery në versione të ndryshme. Ofrohet ndryshimi automatik i rrëshqitjes.

12. Galeria jQuery CSS me ndryshim automatik të rrëshqitjes

Nëse vizitori nuk klikon në shigjetat "Përpara" ose "Prapa" brenda një kohe të caktuar, galeria do të fillojë të lëvizë automatikisht.

13. Rrëshqitësi jQuery "Nivo Slider"

Shtojcë shumë profesionale, me cilësi të lartë, e lehtë me kod të vlefshëm. Ekzistojnë shumë efekte të ndryshme të tranzicionit të rrëshqitjes.

14. Rrëshqitësi jQuery "MobilySlider"

Rrëshqitës i freskët. Rrëshqitësi jQuery me efekte të ndryshme të ndryshimit të imazhit.

15. Shtojca jQuery "Slider²"

Rrëshqitës i lehtë me ndërrues automatik të rrëshqitjes.

16. Rrëshqitësi i freskët i javascript

Rrëshqitësi me ndryshim automatik të imazhit.

Plugin për zbatimin e shfaqjeve të rrëshqitjes me ndryshim automatik të diapozitivëve. Është e mundur të kontrolloni ekranin duke përdorur miniaturat e imazhit.

Rrëshqitësi i imazhit jQuery CSS duke përdorur shtojcën NivoSlider.

19. rrëshqitësi jQuery "jShowOff"

Plugin për rotacionin e përmbajtjes. Tre opsione për përdorim: pa navigim (me ndryshim automatik në formatin e shfaqjes së rrëshqitjes), me navigim në formën e butonave, me navigim në formën e miniaturave të imazhit.

20. Shtojca “Shutter Effect Portfolio”.

Shtojcë e freskët jQuery për dizajnimin e portofolit të një fotografi. Galeria ka një efekt interesant të ndryshimit të imazheve. Fotot ndjekin njëra-tjetrën me një efekt të ngjashëm me funksionimin e një kapaku të lenteve.

21. Rrëshqitësi i lehtë javascript CSS "TinySlider 2"

Zbatimi i një rrëshqitësi imazhi duke përdorur javascript dhe CSS.

22. Rrëshqitësi i mrekullueshëm "Tinycircleslider"

Rrëshqitës i rrumbullakët elegant. Kalimi midis imazheve kryhet duke zvarritur rrëshqitësin në formën e një rrethi të kuq rreth perimetrit. Do të përshtatet në mënyrë të përkryer në faqen tuaj të internetit nëse përdorni elementë të rrumbullakët në dizajnin tuaj.

23. Rrëshqitësi i imazhit me jQuery

Rrëshqitës i lehtë "Kit rrëshqitës". Rrëshqitësi është i disponueshëm në dizajne të ndryshme: vertikale dhe horizontale. Gjithashtu zbatohen lloje të ndryshme navigimi midis imazheve: duke përdorur butonat "Përpara" dhe "Prapa", duke përdorur timonin e miut, duke përdorur klikim të miut në rrëshqitje.

24. Galeria me miniatura “Slider Kit”

Galeria "Slider Kit". Lëvizja e miniaturave kryhet si vertikalisht ashtu edhe horizontalisht. Kalimi midis imazheve kryhet duke përdorur: rrotën e miut, klikimin e miut ose duke lëvizur kursorin mbi miniaturë.

25. Rrëshqitësi i përmbajtjes jQuery "Kit rrëshqitës"

Rrëshqitësi i përmbajtjes vertikale dhe horizontale duke përdorur jQuery.

26. Slideshow jQuery "Slider Kit"

Slideshow me ndryshim automatik të rrëshqitjes.

27. Rrëshqitës i lehtë profesional javascript CSS3

Një rrëshqitës i pastër jQuery dhe CSS3 i krijuar në 2011.

Slideshow jQuery me miniaturë.

29. Slideshow i thjeshtë jQuery

Slideshow me butona navigimi.

30. Slideshow i mrekullueshëm i jQuery “Skitter”.

Shtojca jQuery Skitter për krijimin e rrëshqitjeve mahnitëse. Shtojca mbështet 22 (!) lloje të efekteve të ndryshme të animacionit kur ndryshoni imazhet. Mund të punojë me dy opsione navigimi me rrëshqitje: duke përdorur numrat e rrëshqitjes dhe duke përdorur miniaturë. Sigurohuni që të shikoni demonstrimin, një gjetje me cilësi shumë të lartë. Teknologjitë e përdorura: CSS, HTML, jQuery, PHP.

31. Slideshow "Awkward"

Slide show funksional. Slides mund të jenë: imazhe të thjeshta, imazhe me diçitura, imazhe me këshilla veglash, video. Mund të përdorni shigjetat, lidhjet e numrave të rrëshqitjes dhe tastet majtas/djathtas në tastierën tuaj për të lundruar. Shfaqja e diapozitivëve vjen në disa versione: me dhe pa miniatura. Për të parë të gjitha opsionet, ndiqni lidhjet Demo #1 - Demo #6 që ndodhen në krye të faqes demo.

Një dizajn shumë origjinal për rrëshqitësin e imazhit, që të kujton një tifoz. Tranzicion i animuar i rrëshqitjes. Lundrimi midis imazheve kryhet duke përdorur shigjeta. Ekziston gjithashtu një ndërrim automatik që mund të ndizet dhe çaktivizohet duke përdorur butonin Luaj/Ndalo që ndodhet në krye.

Rrëshqitësi i animuar jQuery. Imazhet e sfondit shkallëzohen automatikisht kur dritarja e shfletuesit ndryshohet. Për çdo imazh, shfaqet një bllok me një përshkrim.

34. Rrëshqitësi “Flux Slider” duke përdorur jQuery dhe CSS3

Rrëshqitësi i ri jQuery. Disa efekte të bukura të animuara kur ndryshoni rrëshqitjet.

35. Shtojca jQuery "jSwitch"

Galeria e animuar jQuery.

Një rrëshqitje e lehtë jQuery me ndryshim automatik të rrëshqitjes.

37. Versioni i ri i shtojcës "SlideDeck 1.2.2"

Rrëshqitësi i përmbajtjes profesionale. Ka opsione me ndryshim automatik të rrëshqitjes, si dhe një opsion që përdor rrotën e miut për të lëvizur midis rrëshqitjeve.

38. Rrëshqitësi jQuery "Sudo Slider"

Rrëshqitësi i lehtë i imazhit duke përdorur jQuery. Ka shumë mundësi zbatimi: ndryshim horizontal dhe vertikal i imazheve, me dhe pa lidhje me numrin e rrëshqitjes, me dhe pa titrat e imazheve, efekte të ndryshme ndryshimi të imazhit. Ekziston një funksion i ndryshimit automatik të rrëshqitjes. Lidhjet me të gjithë shembujt e zbatimit mund të gjenden në faqen demo.

39. Slideshow jQuery CSS3

Slideshow me miniaturë mbështet modalitetin automatik të ndryshimit të rrëshqitjes.

40. Rrëshqitësi jQuery "Flux Slider"

Rrëshqitës me shumë efekte të ndryshimit të imazhit.

41. Rrëshqitësi i thjeshtë jQuery

Rrëshqitësi elegant i imazhit duke përdorur jQuery.

42. Slideshow "Craftyslide" jQuery

43. Slideshow jQuery me ekran të plotë

Slideshow jQuery HTML5 që shtrihet në të gjithë gjerësinë e ekranit me zë.

Një rrëshqitje e thjeshtë jQuery.

Koha nuk qëndron në vend dhe bashkë me të edhe progresi. Kjo ndikoi edhe në internet. Tashmë mund të shihni se si po ndryshon pamja e faqeve të internetit; dizajni adaptiv është veçanërisht i popullarizuar. Dhe në këtë drejtim, janë shfaqur mjaft rrëshqitës të rinj adaptues jquery, galeri, karusele ose shtojca të ngjashme.
1. Rrëshqitësi i përgjegjshëm i postimeve horizontale

Karuseli horizontal adaptiv me udhëzime të hollësishme instalimi. Është bërë në një stil të thjeshtë, por ju mund ta stiloni që t'i përshtatet vetes.

2. Rrëshqitësi në Glide.js

Ky rrëshqitës është i përshtatshëm për çdo faqe interneti. Ai përdor Glide.js me burim të hapur. Ngjyrat e rrëshqitësit mund të ndryshohen lehtësisht.

3. Slideshow me përmbajtje të anuar

Rrëshqitësi i përmbajtjes së përgjegjshme. Pika kryesore e këtij rrëshqitësi është efekti 3D i imazheve, si dhe animacione të ndryshme me pamje të rastësishme.

4. Rrëshqitës duke përdorur kanavacën HTML5

Një rrëshqitës shumë i bukur dhe mbresëlënës me grimca ndërvepruese. Është bërë duke përdorur kanavacën HTML5,

5. Rrëshqitësi i Morfimit të Imazhit

Rrëshqitës me një efekt morfimi (Transformim i qetë nga një objekt në tjetrin). Në këtë shembull, rrëshqitësi është i përshtatshëm për portofolin e një zhvilluesi të internetit ose një studio në internet në formën e një portofoli.

6. Rrëshqitës rrethor

Rrëshqitës në formën e një rrethi me efektin e rrokullisjes së figurës.

7. Rrëshqitës me sfond të paqartë

Rrëshqitësi përshtatës me ndërrim dhe turbullim të sfondit.

8. Rrëshqitës modës i përgjegjshëm

Rrëshqitësi i thjeshtë, i lehtë dhe i përgjegjshëm i faqes në internet.

9. Slicebox - rrëshqitës i imazhit 3D jQuery (I PËRDITËSUAR)

Versioni i përditësuar i rrëshqitësit Slicebox me rregullime dhe veçori të reja.

10.Rrjeti i imazhit të përgjegjshëm të animuar falas

Shtojca JQuery për të krijuar një rrjet fleksibël imazhi që do të ndërrojë fotot duke përdorur animacione dhe orare të ndryshme. Kjo mund të duket e mirë si një sfond ose element dekorativ në një faqe interneti, pasi ne mund të shfaqim në mënyrë selektive imazhe të reja dhe tranzicionet e tyre. Shtojca vjen në disa versione.

11.Rrëshqitësi Flex

Një shtojcë universale falas për faqen tuaj të internetit. Kjo shtojcë vjen në disa opsione rrëshqitës dhe karusele.

12. Korniza e fotografive

Fotorama është një shtojcë universale. Ka shumë cilësime, gjithçka funksionon shpejt dhe lehtë, dhe ju mund të shikoni rrëshqitje në ekran të plotë. Rrëshqitësi mund të përdoret si në madhësi fikse ashtu edhe në përshtatje, me ose pa miniatura, me ose pa lëvizje rrethore dhe shumë më tepër.

P.S. E instalova rrëshqitësin disa herë dhe mendoj se është një nga më të mirët

13. Galeria rrëshqitëse 3D pa pagesë dhe përshtatëse me miniaturë.

Galeria rrëshqitëse eksperimentale 3DPanelLayout me një rrjet dhe efekte interesante animacioni.

14. Rrëshqitësi në css3

Rrëshqitësi adaptiv është bërë duke përdorur css3 me pamje të qetë të përmbajtjes dhe animacion të lehtë.

15. rrëshqitës WOW

WOW Slider është një rrëshqitës imazhi me efekte vizuale të mahnitshme.

17. Elastike

Rrëshqitës elastik me reagim të plotë dhe miniatura të rrëshqitjeve.

18. çarë

Ky është një rrëshqitës i përgjegjshëm me ekran të plotë duke përdorur animacion css3. Rrëshqitësi është bërë në dy versione. Animacioni është bërë mjaft i pazakontë dhe bukur.

19. Fotogaleri adaptive plus

Një rrëshqitës i thjeshtë i galerisë falas me ngarkim imazhi.

20. Rrëshqitës i përgjegjshëm për WordPress

Rrëshqitësi pa pagesë përshtatës për WP.

21. Rrëshqitësi i përmbajtjes paralaks

Rrëshqitës me efekt paralaks dhe kontroll të secilit element duke përdorur CSS3.

22. Rrëshqitës me lidhje muzikore

Rrëshqitësi duke përdorur kodin me burim të hapur JPlayer. Ky rrëshqitës i ngjan një prezantimi me muzikë.

23. Rrëshqitës me jmpress.js

Rrëshqitësi i përgjegjshëm bazohet në jmpress.js dhe për këtë arsye do t'ju lejojë të shtoni disa efekte interesante 3D në rrëshqitjet tuaja.

24. Shfaqja e shpejtë e rrëshqitjes me rrëshqitje

Slide show me ndërrim të shpejtë të rrëshqitjes. Rrëshqitjet aktivizojnë pezullimin.

25. Fizarmonikë e imazhit me CSS3

Fizarmonikë e imazhit duke përdorur css3.

26. Një Shtojcë e galerisë së optimizuar me prekje

Kjo është një galeri reaguese që është e optimizuar për pajisjet me prekje.

27. Galeria 3D

Galeria e Murit 3D - e krijuar për shfletuesin Safari, ku efekti 3D do të jetë i dukshëm. Nëse e shikoni në një shfletues tjetër, funksionaliteti do të jetë i mirë, por efekti 3D nuk do të jetë i dukshëm.

28. Rrëshqitës me faqezim

Rrëshqitësi i përgjegjshëm me faqezim duke përdorur rrëshqitësin JQuery UI. Ideja është të përdoret një koncept i thjeshtë navigimi. Është e mundur të ktheheni prapa të gjitha imazhet ose të ndërroni rrëshqitje pas rrëshqitje.

29.Image Montage me jQuery

Rregulloni automatikisht imazhet në varësi të gjerësisë së ekranit. Një gjë shumë e dobishme kur zhvilloni një faqe interneti portofoli.

30. Galeria 3D

Një rrëshqitës i thjeshtë rrethor 3D duke përdorur css3 dhe jQuery.

31. Modaliteti i ekranit të plotë me efekt 3D duke përdorur css3 dhe jQuery

Një rrëshqitës me aftësinë për të parë imazhe në ekran të plotë me një tranzicion të bukur.

Një nga sfidat më të mëdha me të cilat përballet aktualisht qytetërimi perëndimor është se si të shfaqni një sasi të madhe të përmbajtjes në një hapësirë ​​të vogël.

Një zgjidhje efektive është rregullimi i përmbajtjes në blloqe të njëpasnjëshme, duke përdorur atë që njihet në industri (dhe në komunitetin online) si një rrëshqitës përmbajtjeje. Ju mund të mos keni dëgjuar për të, por unë jam i gatshëm të vë bast që patjetër duhet ta keni parë atë.

Për të rifreskuar kujtesën tuaj dhe për t'ju dhënë një ide se çfarë do të krijojmë, më poshtë është një shembull i një rrëshqitësi të përmbajtjes:

Në këtë artikull, unë do t'ju tregoj se si të krijoni rrëshqitësin tuaj të bukur të përmbajtjes që është shumë i ngjashëm me këtë. Përtej krijimit të thjeshtë të një rrëshqitësi të përmbajtjes, do të mësoni shumë rreth mënyrës se si HTML, CSS dhe JavaScript ndërveprojnë për të krijuar një rrëshqitës të përmbajtjes. Në përgjithësi, ka shumë për të pritur, kështu që le të fillojmë.

Rishikoni se si funksionon

Përpara se të zhytemi fillimisht në HTML, CSS dhe JavaScript që do të kërkohen për t'i bërë të gjitha të funksionojnë, le të bëjmë një hap të shpejtë prapa dhe të kuptojmë elementët që përbëjnë rrëshqitësin tonë të përmbajtjes.

Së pari, ne kemi përmbajtjen që duam të vendosim në rrëshqitës:

Përmbajtja mund të jetë çdo gjë. Kjo mund të jetë imazhe, përmbajtje standarde HTML, një kombinim i disa llojeve të përmbajtjes, etj. Nuk ka shumë rëndësi. Nëse përmbajtja jonë mund të mbështillet brenda elementeve DIV, jemi mirë. Thjesht duhet të siguroheni që çdo bllok i vetëm i përmbajtjes të ketë të njëjtën gjerësi dhe lartësi.

Kur shikoni një rrëshqitës, ju shihni vetëm një bllok përmbajtjeje në të njëjtën kohë. Nëse nuk ndërmerren hapa shtesë, përmbajtja e shfaqur njëkohësisht në madhësinë e saj origjinale mund ta kthejë rrëshqitësin në diçka vizualisht jo tërheqëse.

Ne do ta rregullojmë këtë në dy hapa. Së pari, ne do ta mbështjellim përmbajtjen në një enë që ka të njëjtën madhësi si një nga blloqet e përmbajtjes:

Pasi të kemi mbështjellë përmbajtjen në një enë, ne shkurtojmë të gjithë elementët rreth bllokut të përmbajtjes për të siguruar që vetëm një bllok të dalë në të njëjtën kohë:

Hapi tjetër është të bëni të mundur shikimin e pjesës tjetër të përmbajtjes. Kjo mund të bëhet në mënyra të ndryshme. Në këtë artikull ne po përdorim një grup lidhjesh rrethore që mund të klikoni:

Gjëja e fundit që duhet të bëni për të funksionuar rrëshqitësin është që çdo lidhje të klikohet. Kjo do të kërkojë disa truke CSS së bashku me disa JavaScript, por asgjë shumë e komplikuar. Dhe kjo, miqtë dhe armiqtë e mi të dashur, është e gjithë përmbledhja e shkurtër e asaj nga e cila përbëhet një rrëshqitës i përmbajtjes.

Në seksionet e ardhshme, ne do të shikojmë kodin aktual HTML, CSS dhe JavaScript që do të fuqizojë rrëshqitësin tonë.

përmbajtja

Le të ndjekim të njëjtat hapa që trajtuam në pasqyrën e përgjithshme dhe të fillojmë me... përmbajtjen. Së pari, ne duhet të krijojmë një pikënisje. Le të krijojmë një dokument HTML bosh dhe të shtojmë kodin e mëposhtëm nga shablloni fillestar HTML5 në të:

Ky shënim nuk bën asgjë tjetër përveç përcaktimit të strukturës së dokumentit, por është hapi i parë që do të na lejojë të shtojmë më tej përmbajtjen tonë. Le ta bëjmë atë në seksionin tjetër.

Përmbajtja (e vërtetë këtë herë)

Brenda elementit të trupit, shtoni kodin e mëposhtëm HTML:

Midis etiketave të stilit, shtoni rregullat e mëposhtme të stilit që përcaktojnë formën dhe ngjyrën e përmbajtjes sonë:

#wrapper ( gjerësia: 2200px; pozicioni: relative; majtas: 0px; ) .content ( float: majtas; gjerësia: 550px; lartësia: 350px; hapësira e bardhë: normale; sfondi-përsërit: pa përsëritje; ) #itemOne ( sfond -ngjyra: #ADFF2F; imazhi i sfondit: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo (ngjyra e sfondit: #FF7F50; imazhi i sfondit: url("http ://www.kirupa.com/images/yellowSquare.png"); ) #itemThree (ngjyra e sfondit: #1E90FF; imazhi i sfondit: url("http://www.kirupa.com/images/pinkSquare.png "); ) #itemFour (ngjyra e sfondit: #DC143C; imazhi i sfondit: url ("http://www.kirupa.com/images/graySquare.png"); )

Tani kur shikoni faqen, do të shihni diçka të ngjashme me atë që tregohet në pamjen e ekranit:

Do të shihni katër blloqe të mëdha drejtkëndëshe të vendosur mjeshtërisht krah për krah. Në varësi të rezolucionit të ekranit dhe madhësisë së dritares së shfletuesit, mund t'ju duhet të lëvizni pak djathtas ose majtas për të parë të gjithë drejtkëndëshat.

Tani kushtojini pak vëmendje dhe përpiquni të kuptoni pse shihni atë që shihni. Rishikoni shënimin HTML dhe kuptoni elementët që janë në dokumentin tuaj.

Kushtojini vëmendje vlerave të klasës dhe id-së që përdoren në të, sepse ato do të ndjekin rregullat e stilit që keni shtuar. Shikoni rregullat e stilit dhe si ndikon vizualizimi i tyre në rezultat. Tani le t'i përmbledhim të gjitha.

Çfarë kemi bërë

Në shënjimin tonë HTML, përmbajtja që shihni përbëhet nga katër elementë div, secili përmban një vlerë të klasës së përmbajtjes. Kjo vlerë e klasës vjen nga rregulli i stilit .content, i cili specifikon madhësinë e çdo blloku: 550 piksel i gjerë dhe 350 piksel i lartë:

Përmbajtja ( notimi: majtas; gjerësia: 550 px; lartësia: 350 px; hapësira e bardhë: normale; përsëritja e sfondit: pa përsëritje; )

Rregulli i stilit të përmbajtjes gjithashtu specifikon se vlera e float është lënë. Si rezultat, elementët div janë të rreshtuar. Gjëja e fundit që deklaron ky rregull stili është vetia e hapësirës së bardhë. Kjo veti përcakton se si do të mbështillet teksti në një paragraf.

E përdora këtë pronë vetëm për lehtësi. Nëse vendosni të dilni përtej qëllimit të këtij artikulli dhe të shtoni përmbajtje në secilin prej elementeve div, do të më falënderoni sepse teksti juaj do të mbështillet siç duhet, ose do ta hiqni këtë veçori (ose do ta vendosni në një vlerë tjetër) nëse nuk e bëni nuk dua të shoh të tijën.

Në këtë pikë, elementi ynë div përshtatet dhe rreshtohet siç duhet. Është për të ardhur keq që ai është plotësisht i padukshëm:

Për të zgjidhur këtë problem, ne i caktojmë çdo div një identifikues unik përmes vlerave të id: itemOne , itemTwo , itemThree , anditemFour . Në seksionin e stileve kemi katër rregulla stili që përputhen me këto vlera id:

#itemOne (ngjyra e sfondit: #0099CC; imazhi i sfondit: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo (ngjyra e sfondit: #FFCC00; imazhi i sfondit: url("http://www.kirupa.com/images/yellowSquare.png"); ) #itemThree (ngjyra e sfondit: #FF6666; imazhi i sfondit: url("http://www.kirupa.com/images /pinkSquare.png"); ) #itemFour (ngjyra e sfondit: #E8E8E8; imazhi i sfondit: url ("http://www.kirupa.com/images/graySquare.png"); )

Siç mund ta shihni, këto rregulla stili përcaktojnë vetëm ngjyrën e sfondit dhe imazhin e sfondit për përmbajtjen tonë. Që tani e tutje, div nuk janë më të padukshëm. Ato shfaqen si drejtkëndësha me ngjyra të ndryshme me përmasa 550 me 350 piksele.

Ne pothuajse kemi mbaruar. Gjëja e fundit që do të shikojmë është div misterioz që përmban mbështjellësin e ID-së:

Ky element mbështjell të gjithë përmbajtjen tonë në një enë. Ky nuk është kontejneri që kisha parasysh në rishikim kur fola për ndërprerjen e të gjithë përmbajtjes rreth blloqeve të përmbajtjes.

Ky enë është krijuar për diçka pak më ndryshe. Fjalë për fjalë thjesht përfundon përmbajtjen në mënyrë që ne të mund t'i shikojmë të gjitha.

Rregulli përkatës i stilit #wrapper përmbush këtë detyrë:

#wrapper (gjerësia: 2200px; pozicioni: relative; majtas: 0px; )

Ky rregull stili së pari përcakton gjerësinë e elementit të mbështjellësit si 2200 piksele. Kjo do të thotë, gjerësia totale e përmbajtjes sonë... të cilën e merrni duke shumëzuar 4 (me numrin e elementeve div) me 550 piksele.

Pozicioni dhe vetitë e majta synojnë të vendosin aftësinë për të lëvizur kontejnerin në çdo vend që duam. Duke vendosur vetinë e pozicionit në relative, ne heqim elementin nga struktura standarde e dokumentit dhe bëjmë të mundur vendosjen e tij kudo duke përdorur vlerat e pikselit në lidhje me vendin ku ndodhet aktualisht.

Meqenëse blloqet tona të përmbajtjes div janë fëmijë të kësaj div, ato tërhiqen aty ku vendoset div prind. Siç mund ta imagjinoni, kjo është shumë e përshtatshme!

Prerja e përmbajtjes

Në pjesën e mëparshme, ne u kujdesëm për marrjen e blloqeve të përmbajtjes që do të dalin. Gjëja tjetër që do të bëjmë është të shkurtojmë përmbajtjen tonë në mënyrë që vetëm një bllok rrëshqitës të jetë i dukshëm në çdo kohë të caktuar.

Këtu na duhet kontejneri kryesor. Mbështillni të gjithë elementët div të kodit tuaj HTML në një div me id contentContainer:

Thjesht shtoni dy rreshta të rinj dhe, nëse dëshironi, dhëmbëza rreshtash, të cilat thjesht synojnë të paraqesin kodin HTML në mënyrë të përshtatshme.

Tani, nëse shikoni përmbajtjen tonë të mbështjellë (përsëri), nuk do të shihni asgjë të re. Thjesht paketimi i elementeve në një div tjetër nuk bën asgjë kuptimplotë, aq më pak asgjë që duam të bëjmë për të shkurtuar përmbajtjen.

Për të shtuar këtë veprim kuptimplotë, krijoni rregullin e mëposhtëm të stilit #contentContainer:

#contentContainer ( gjerësia: 550 pikselë; lartësia: 350 pikselë; kufiri: 5 px e zezë, e ngurtë; tejmbushja: e fshehur; )

Vini re se po e vendosni madhësinë e elementit contentContainer në 550 piksele me 350 piksele. Kjo është, saktësisht e njëjta madhësi si secili prej blloqeve të përmbajtjes. Për ta bërë rrëshqitësin të dallohet pak, vendosëm një kornizë të zezë me gjerësi 5 piksele.

Gjëja e fundit që bëjmë është të shkurtojmë përmbajtjen duke vendosur veçorinë overflow në hidden . Kjo është për të fshehur gjithçka jashtë elementit contentContainer.

Të gjitha së bashku na japin foton e mëposhtme në shfletues:

Ju lutemi vini re se vetëm përmbajtja e bllokut tuaj të parë është e dukshme tani. Pjesa tjetër e përmbajtjes ekziston ende, thjesht tani është e fshehur për shkak të prerjes sonë nëpërmjet vlerës së fshehur për vetinë e tejmbushjes.

Lidhje navigimi

Kështu arritëm tek ata! Po i afrohemi të paturit një rrëshqitës plotësisht funksional. Në këtë seksion, ne do të fokusohemi te lidhjet e navigimit—elementet që klikoni për të parë blloqe të tjera të përmbajtjes.

Këto lidhje nuk kanë të bëjnë fare me përmbajtjen tonë Container ose ndonjë pjesë tjetër të HTML që kemi tashmë. Ju duhet të shtoni linjat e theksuara në kodin HTML që kemi tashmë (por mbi etiketën e skriptit):

Le t'i hedhim një vështrim të shpejtë kodit HTML që sapo keni shtuar. Së pari, ne kemi një div me një ID të navLinks që përshkruan një listë të pa renditur. Vetë lidhjet paraqiten si artikuj të listës.

Çdo element i listës përmban një vlerë të klasës së artikullit Links si dhe një atribut të personalizuar të të dhënave* të quajtur data-pos. Ne do t'i kthehemi këtij atributi pak më vonë, por tani për tani vetëm vini re se ekziston.

Duhet të stilojmë kodin HTML që sapo shtuam. Në seksionin e stileve, shtoni rregullat e mëposhtme:

#navLinks ( rreshtimi i tekstit: në qendër; gjerësia: 550 px; ) #navLinks ul ( margjina: 0 px; mbushja: 0 px; ekrani: blloku inline; margjina-lart: 6 px; ) #navLinks ul li ( float: majtas; tekst- rreshtoni: qendër; margjina: 10 pikselë; stili i listës: asnjë; kursori: treguesi; ngjyra e sfondit: #CCCCCC; mbushja: 5 pikselë; rrezja e kufirit: 50%; kufiri: i zi 5 px; ) #navLinks ul li:hover ( ngjyra e sfondit: #FFFF00; ) #navLinks ul li.active ( ngjyra e sfondit: #333333; ngjyra: #FFFFFF; gjerësia e përshkrimit: 7 px; ) #navLinks ul li.active:hover (ngjyra e sfondit: #484848; ngjyra: #FFFFFF;)

Wow, aq shumë CSS. Edhe pse ka shumë kod, nuk ka asgjë vërtet unike ose interesante në të. Një pjesë e kodit CSS krijon një menu horizontale me lidhje të shfaqura pranë njëri-tjetrit.

Pjesa tjetër e kodit përcakton pamjen e secilës lidhje, si dhe theksimin përkatës të saj kur rri pezull.
Ende ia vlen të ndalemi në një pikë më në detaje.

Kjo është për shkak të dy rregullave të stilimit që zbatohen për klasën aktive:

#navLinks ul li.active ( ngjyra e sfondit: #333333; ngjyra: #FFFFFF; gjerësia e përvijimit: 7 px; ) #navLinks ul li.active:hover (ngjyra e sfondit: #484848; ngjyra: #FFFFFF; )

Nëse ju kujtohet, nuk kishte asnjë element në kodin tonë HTML që të kishte vlerën e klasës aktive . Pavarësisht, këto rregulla stilimi do të zbatohen përsëri sepse klasa aktive shtohet në një nga lidhjet tona në mënyrë dinamike.

Nëse e keni të vështirë t'i kuptoni të gjitha këto tani, mos u shqetësoni, ne do ta shqyrtojmë në detaje shumë shpejt.

Për momentin, rrëshqitësi ynë duket kështu:

Nëse rrëshqitësi juaj nuk duket si duhet, atëherë ka shumë mundësi të keni bërë një gabim shkrimi... ose diçka tjetër. Kështu ndodhi?

Krijimi i vetë rrëshqitësit

Mirë, tani për tani kemi diçka që duket shumë e ngjashme me një rrëshqitës pune. Megjithatë, kur klikoni ndonjë nga lidhjet, absolutisht asgjë nuk ndodh.

Le të krijojmë tani një rrëshqitës funksional, por së pari do të shtojmë disa JavaScript dhe disa elementë të lezetshëm ... domethënë disa tranzicione të bukura CSS.

Shtimi i JavaScript

Brenda etiketës së skriptit, shtoni linjat e mëposhtme të kodit JavaScript:

// thjesht duke kërkuar DOM-in... sikur po i kërkojmë leje shefit! var links = dokument.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); // activeLink ofron një etiketë për elementin aktiv var activeLink = 0; // konfiguroni gjurmimin e ngjarjeve për (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; }

Gjithçka që duhet të bëjmë është të sigurojmë një tranzicion të qetë në vend të një ndryshimi të papritur të rrëshqitjes.

Shtimi i një tranzicioni

Aktualisht kemi një rrëshqitës të përmbajtjes që ende nuk e lëviz përmbajtjen pa probleme. Në vend të kësaj, rrëshqitjet kërcejnë befas nga njëra në tjetrën. Për ta bërë përmbajtjen të lëvizë pa probleme, le të përdorim një tranzicion CSS. Le të shtojmë një nga kalimet e mundshme në rrëshqitësin tonë.

Gjeni rregullin e stilit #wrapper dhe shtoni një rresht në të:

Rreshti që keni shtuar përcakton tranzicionin. Vetia e specifikuar në të specifikon se kalimi duhet të ndodhë kur vetia e majtë ndryshon. Tranzicioni ynë do të ndodhë për 0,5 sekonda dhe do të përdorë funksionin e kohës së lehtësimit për të shpejtuar procesin në fillim të tranzicionit dhe për të ngadalësuar në fund.

Meqenëse vetia e tranzicionit është ende duke pësuar disa ndryshime në W3C, do t'ju duhet të përdorni prefikse për të siguruar që çdo shfletues modern mund të aplikojë tranzicionin. Nëse nuk dëshironi të merreni me këtë, shtoni skriptin e mëposhtëm pak përpara etiketës së skriptit:

Jo, ky skenar nuk bën asgjë me qëllim të keq. Ky është një version i hostuar i bibliotekës Leah Veru pa prefiks. Në vend që të mësoni shumë për mënyrën se si funksionojnë rrëshqitësit, ju gjithashtu mund të shkarkoni skriptin e saj, ta ngarkoni atë në serverin tuaj dhe të lidheni me versionin tuaj.

Gjithsesi, nëse e shikoni dokumentin tani, duhet të keni një rrëshqitës të përmbajtjes që funksionon që shfaq pa probleme përmbajtjen kur klikoni në ndonjë nga lidhjet e navigimit. Kjo duhet të jetë identike me atë që keni parë në shembullin e postuar në fillim të këtij artikulli.

Më në fund!!!

Kodi i analizimit (dhe gjithçka tjetër!)

Tani që kemi një rrëshqitës të përmbajtjes që funksionon, le të përpiqemi të kuptojmë që në fillim se si kodi i lidh të gjitha së bashku.

Çfarë po ndodh realisht

Pasi të ngarkohet rrëshqitësi i përmbajtjes, shihni që shfaqet blloku i parë i përmbajtjes. Pjesa tjetër e përmbajtjes është prerë dhe e fshehur nga pamja:

Duke klikuar çdo lidhje shfaqet blloku përkatës i përmbajtjes. Rrëshqitësi e di se sa përmbajtje duhet të shfaqet në zonën e dukshme falë lidhjes së ngushtë midis secilës lidhje navigimi dhe pozicionit të pikselit të çdo blloku të përmbajtjes.

Le të përpiqemi ta kuptojmë këtë lidhje. Ka disa gjëra që ne i dimë. Ne e dimë se secili prej blloqeve tona të përmbajtjes është 550 piksel i gjerë. Ne gjithashtu e dimë se blloku ynë i parë i përmbajtjes është vendosur horizontalisht në 0 pixel.

Si e dimë këtë? Të gjitha blloqet tona të përmbajtjes janë mbështjellë brenda një elementi mbështjellës që mbyll të gjithë përmbajtjen tonë dhe skaji i majtë i elementit mbështjellës ka një pozicion prej 0 pikselësh:

Kjo është deklaruar në rregullin e stilit #wrapper. Nga ky rregull stili, ne gjithashtu e dimë se të gjitha blloqet e përmbajtjes zhvendosen në të majtë dhe vendosen në një rresht pranë njëri-tjetrit.

Duke e ditur këtë, ne mund të llogarisim pozicionet për të gjitha blloqet e përmbajtjes si më poshtë:

Blloku i parë ndodhet në 0 piksele. Gjerësia e bllokut të parë të përmbajtjes është pozicioni i bllokut të dytë. Kjo është 550 piksele. Çdo bllok pasues ka një pozicion 550 piksel më të madh se ai i mëparshmi.

Meqenëse e dimë pozicionin e saktë të pikselit të çdo blloku të përmbajtjes, mund ta përdorim këtë informacion për të udhëzuar rrëshqitësin e përmbajtjes që të lëvizë elementin e mbështjellësit në vendndodhjen e dëshiruar në mënyrë që pjesa e përmbajtjes që duam të jetë e dukshme.

Atributi data-pos!

E shkëlqyeshme, tani ne i dimë pozicionet e të gjitha blloqeve të përmbajtjes. Ajo që nuk kemi parë ende është se si njohja e pozicionit të pikselit të një blloku të përmbajtjes do të na ndihmojë të shfaqim bllokun e dëshiruar në dritaren e rrëshqitësit.

Si mund të specifikojmë që kur klikohet një lidhje, duhet të shfaqet një bllok i caktuar i përmbajtjes? Vetëm. Çdo lidhje përmban pozicionin e saktë (në pixel) të bllokut të përmbajtjes që i korrespondon:

Vini re se atributi data-pos tregon në secilën prej lidhjeve, vlerën e secilit prej atributeve data-pos. Ato janë të barabarta me vlerën negative të pozicionit origjinal horizontal të secilit prej blloqeve të përmbajtjes.

Kur klikojmë në një lidhje, përdoret JavaScript, i cili lexon atributin data-pos të lidhur me atë lidhje dhe më pas kalon vlerën e pozicionit të pikselit të elementit tonë të mbështjellësit në vlerën që është lexuar nga atributi.

Për shembull, ja çfarë ndodh pasi klikoni lidhjen e tretë:

Lidhja e tretë ka një vlerë të të dhënave-pos prej 1100 piksele. Kjo korrespondon me sa pikselë do të duhet të zhvendoset guaska e kontejnerit në mënyrë që blloku i tretë i përmbajtjes të shfaqet në zonën e dukshme. Klikimi i ndonjë lidhjeje tjetër do të vendosë vetinë e elementit të guaskës në vlerën e përmbajtur në atributin data-pos të asaj lidhjeje.

Në rregull, kështu që ne kemi mbuluar lidhjen midis lidhjeve dhe pozicionimit të përmbajtjes për të cilën fola më herët. Tani gjithçka që duhet të bëjmë është të shikojmë JavaScript, i cili do të transformojë gjithçka që kam shkruar në këtë seksion në diçka që shfletuesi mund të kuptojë.

Gjithçka ka të bëjë me JavaScript

Meqenëse tani keni një kuptim konceptual se si funksionon gjithçka brenda rrëshqitësit tonë të përmbajtjes, le të shohim JavaScript, i cili zbaton gjithçka që dini. Siç bëj në të gjithë artikujt e mi, le të zbërthejmë çdo rresht të JavaScript dhe të shohim se çfarë bën për rrëshqitësin tonë.

Le të fillojmë nga lart:

var links = dokument.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper");

Variabla e lidhjeve merr grupin e të gjithë elementëve të dokumentit tonë që kanë një vlerë të klasës itemLinks. Këta elementë janë artikuj të listës që veprojnë si lidhje lundrimi. Variabla wrapper është shumë e ngjashme me lidhjet. Ai pranon një tregues për një element me mbështjellës identifikues.

querySelector dhe querySelectorAll

Vini re se si po pyes DOM-in. Në vend që të përdor diçka si getElementsByClassName ose getElementById, unë përdor funksionet e reja querySelectorAll dhe querySelector.

Do të shihni që ne do t'i përdorim të dyja këto variabla më vonë, kështu që mbani në mend ato.

var activeLink = 0;

Variabla activeLink përdoret për të ruajtur pozicionin e përmbajtjes që shfaqet aktualisht. Do ta kuptoni më mirë kuptimin e kësaj variabli kur ta shpjegoj në veprim pak më vonë.

Seti tjetër i rreshtave është një cikli for:

// konfigurimi i gjurmimit të ngjarjeve për (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }

Këtu ne përsërisim mbi çdo element të variablave të lidhjeve dhe i caktojmë një gjurmim të ngjarjeve. Ky element gjurmues i ngjarjes do të thërrasë funksionin setClickedItem kur të jetë kapur një ngjarje klikimi.

Linja e mëposhtme shkakton një sërë ndryshimesh:

// vendosja e elementit të parë si lidhje aktive.classList.add("aktive");

Ne shtojmë vlerën e klasës aktive në elementin e parë të lidhjes së navigimit. Kjo bëhet duke kaluar vlerën ActiveLink në grupin e lidhjeve. Meqenëse activeLink është 0, grupi normalisht do të merrte elementin e parë dhe, duke përdorur API-në classList, do të shtonte vlerën e klasës aktive.

Pasi të ekzekutohet kjo linjë kodi, mbani mend kur i kushtuam vëmendje rregullave të stilit të mëposhtëm?

Epo, tani këto rregulla stili hyjnë në lojë dhe ndihmojnë në dallimin e lidhjes aktive të navigimit nga lista e lidhjeve të tjera joaktive. Këto rregulla stili do t'i kthehemi pak më vonë dhe do t'i shikojmë më në detaje.

Gjëja tjetër që do të shikojmë është mbajtësi i ngjarjeve setClickedItem, i cili thirret kur klikohet ndonjë nga lidhjet:

funksioni setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Ky funksion fillimisht e kalon gjendjen e të gjitha lidhjeve tuaja në joaktive duke përdorur thirrjen removeActiveLinks. Ne do ta shikojmë këtë veçori pak më vonë.

Gjëja tjetër e rëndësishme që bën ky funksion është se ndryshon vlerën e vetive ID të artikullit të zgjedhur në activeLink. Kjo siguron që ActiveLink të tregojë gjithmonë numrin që korrespondon me bllokun e përmbajtjes që shfaqet aktualisht në rrëshqitës.

Pas përfundimit të këtyre dy hapave (më tepër të mërzitshëm), ky funksion i kalon një referencë elementit të zgjedhur në funksionin changePosition. E cila nga ana tjetër bën disa gjëra të mahnitshme, për të cilat do të flas në paragrafin tjetër.

Ja ku ndodhin ndryshimet interesante! Le të hidhemi pak përpara dhe të shohim funksionin e ndryshimit të pozicionit:

// Trajtuesi ndryshon pozicionin e rrëshqitësit pasi jemi të bindur // se lidhja që na nevojitet është caktuar si aktive. funksioni changePosition(link) (link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = pozicion; )

Ky funksion bën dy gjëra:
I. Ndryshon shfaqjen vizuale të lidhjes së zgjedhur për të treguar që ajo është aktualisht aktive.
II. Vendos pozicionin e elementit të guaskës.

Le t'i shikojmë këto dy gjëra më në detaje.

Ndrysho shfaqjen vizuale të lidhjes së zgjedhur/aktive

Për ta bërë më të qartë për ju se për çfarë po flisja më parë, lidhjet tuaja të navigimit mund të jenë në një nga dy gjendjet. Këto gjendje synojnë të lejojnë përdoruesin të shohë se cili bllok i përmbajtjes është aktualisht aktiv:

Në këtë figurë, mund të përcaktoni menjëherë që blloku i përmbajtjes që korrespondon me lidhjen e katërt është aktualisht aktiv dhe tre lidhjet e para janë joaktive.

Ky ndryshim vizual realizohet duke shtuar dhe hequr klasat CSS. Klasa aktive shtohet në lidhjen aktive. Të gjitha lidhjet që nuk janë aktive nuk përmbajnë një vlerë të klasës aktive. Do të kuptoni se si funksionon kjo kur të shikojmë funksionin removeActiveLinks.

Në çdo rast, ju do të mbani mend se më herët kemi quajtur dy rregullat e mëposhtme të stilit:

#navLinks ul li.active ( ngjyra e sfondit: #333333; ngjyra: #FFFFFF; gjerësia e përvijimit: 7 px; ) #navLinks ul li.active:hover (ngjyra e sfondit: #484848; ngjyra: #FFFFFF; )

Në funksionin tonë setClickedItem (i njohur edhe si funksioni që do të thirret kur klikohet një lidhje), ne fillimisht thërrasim removeActiveLinks:

funksioni setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Ky funksion është përgjegjës për heqjen e klasës aktive për të gjitha lidhjet e navigimit:

funksioni removeActiveLinks() ( për (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Mund ta mendoni si një buton të rivendosjes globale. Ai përsëritet përmes lidhjeve të navigimit që ruhen në variablin e lidhjeve dhe heq vlerën e klasës aktive duke përdorur classList.remove() . Vetëm mbani në mend se nëse ndonjë nga lidhjet e navigimit përmban një vlerë të klasës aktive, mirë... nuk do të ketë më të tilla.

Kështu, ne shikuam se si të hiqni klasën aktive nga të gjitha lidhjet tuaja. Shtimi i një klase në një kthesë është shumë e thjeshtë:

funksioni removeActiveLinks() ( për (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Të njëjtën ClassList që kemi përdorur më parë për të hequr vlerën e klasës aktive, ne përdorim për të shtuar vlerat e klasës aktive përsëri në lidhjen e zgjedhur. Kjo lidhje e zgjedhur merr një argument lidhjeje që i transmetohet.

Vendosja e pozicionit të guaskës

Ne pothuajse kemi mbaruar! Pas gjithë këtyre hapave, më në fund arrijmë te funksioni changePosition, i cili në fakt vendos pozicionin e elementit të mbështjellësit të rrëshqitësit dhe shfaq bllokun e përmbajtjes që korrespondon me lidhjen që zgjidhni.

Le të shohim fragmentin e mëposhtëm:

funksioni changePosition(link) (link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = pozicion; )

Variabli i pozicionit ruan vlerën e atributit data-pos të lidhjes që kemi klikuar. Pasi të kemi vlerën e atributit data-pos, e vendosim pronën e majtë CSS të elementit wrapper në të njëjtën vlerë.

Si lidhet kjo me zbatimin e një efekti rrëshqitës? Ju kujtohet që pak kohë më parë i shtuam një rregull stilit #wrapper?

#mbështjellës (gjerësia: 2200 pikselë; pozicioni: relative; majtas: 0 px; tranzicioni: majtas 0,5s lehtësi për të hyrë në dalje; )

Vini re se ne kemi përcaktuar që tranzicioni të hyjë në fuqi kur vetia e majtë të ndryshojë. Mendoni se çfarë bën JavaScript-i ynë? Përcakton pronën e majtë! Tranzicioni CSS zbulon këtë ndryshim dhe shkakton lëvizjen e përmbajtjes. Gjithçka që ju nevojitet për ta bërë këtë të funksionojë është të shtoni një rresht JavaScript.

Nuk e di për ju, por për mua është thjesht e mahnitshme. Kjo është diçka që nuk mund ta imagjinonim disa vite më parë, kur na u desh të bënim shumë përpjekje dhe të shkruanim kodin për të trajtuar efektin rrëshqitës. Kjo është ajo që e bën të bukur rrëshqitësin tonë të përmbajtjes.

Ashtu si kjo, ne sapo krijuam një rrëshqitës të përmbajtjes nga e para dhe (më e rëndësishmja) mësuam se si funksionon.

Përmirësimi i rrëshqitësit të përmbajtjes

Rrëshqitësi i përmbajtjes që sapo krijuam është mjaft i lezetshëm, por ne mund ta bëjmë atë edhe më të freskët. Në këtë seksion, ne do të shikojmë dy përmirësime që mund t'ju duken shumë të dobishme. Gjatë rrugës, do të mësojmë disa truke të reja JavaScript dhe CSS. Do të jetë, siç thonë të rinjtë tani: "Po qaj!"

Lëvizja me transformimin translate3d

Aktualisht, rrëshqitjet tona lëvizen duke ndryshuar vlerën e veçorisë së majtë CSS që aplikohet në elementin div të mbështjellësit. Duke përdorur veçorinë e majtë ne bëjmë që rrëshqitësi të funksionojë, por kjo metodë ka të meta serioze. Ju nuk mund të përdorni përshpejtimin e harduerit për të siguruar tranzicion të qetë të rrëshqitjes.

Kjo është veçanërisht e vërtetë për pajisjet celulare që shpesh përdorin pajisje me shpejtësi të ulët të lidhjes në internet, dhe këtu mund të jenë veçanërisht të dukshme ndryshimet e ndërprera, të rrëshqitshme të rrëshqitjes.

Kjo mund të rregullohet duke përdorur funksionin e transformimit translate3d, i cili do të bëjë që rrëshqitjet të lëvizin pa probleme. Ky funksion merr vlerat x, y dhe z si argumente, dhe ndryshimi i ndonjë prej këtyre vlerave do të ndryshojë pozicionin e elementit të synuar.

Një veçori e veçantë e këtij funksioni është se si rezultat i përdorimit të tij, hardueri i shfletuesit përshpejton ndryshimin e pozicionit. Çfarë presim?

Gjëja e parë që duhet të bëjmë është të ndryshojmë rregullin e stilit #wrapper. Zëvendësoni deklaratën e pozicionit dhe të pronave të lëna me kodin e mëposhtëm:

Kështu, transformimi vendos pozicionin fillestar të elementit të guaskës.

Faza e parë: Shtimi i elementeve ndihmëse

Në hapin e parë, ne shtojmë kodin ndihmës të mëposhtëm poshtë kodit kryesor që kemi aktualisht:

// // Përdorimi i transformimeve // ​​var transforms = ["transformim", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(transformon); // menaxho funksionin e prefikseve të shitësit getSupportedPropertyName(properties) ( për (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }

Ky kod do të na ndihmojë të vendosim vetinë e transformimit duke përdorur prefikset e shitësit në mënyrë që të mbështetet nga sa më shumë shfletues të jetë e mundur.

Në këtë artikull nuk do t'i shpjegoj këto rreshta. E vetmja gjë që duhet të dini është se i gjithë ky kod ndihmon në vendosjen e Property për të transformuar, msTransform, mozTransform ose oTransform. Në varësi të moshës së shfletuesit që përdorni, do të përdoret një nga këto vlera.

Faza e dytë: prezantimi i Ahoy!

Në funksionin changePosition, gjeni linjat e mëposhtme të kodit:

funksioni changePosition(link) ( var position = link.getAttribute ("data-pos"); wrapper.style.left = pozicion; link.classList.add ("aktive"); )

Zëvendësojini ato me kodin e mëposhtëm:

funksioni changePosition(link) ( var position = link.getAttribute ("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}

Ky kod bën disa gjëra mjaft të thjeshta. Ndryshorja translateValue krijon një paraqitje të bazuar në varg të funksionit translate3d në të cilin pjesa X është e mbushur me vlerën e ndryshores së pozicionit. Pasi të jetë krijuar ky varg, gjithçka që duhet të bëjmë është ta kalojmë te objekti i stilit të elementit mbështjellës.

Vini re se përkufizimi i vetive të stilit përkatës trajtohet nga ndryshorja transformProperty, të cilën e pamë pak më herët.

Nëse tani e shikoni dokumentin, do të shihni se blloqet e përmbajtjes në rrëshqitës po kërcejnë nga një vend në tjetrin.

Natyrisht, kjo nuk është ajo që prisni të shihni. Çfarë ndodhi me lëvizjen e qetë? Përgjigja është se na mungon edhe një ndryshim. Për fat të mirë, kjo është e lehtë për t'u rregulluar. Nëse kthehemi te rregulli i stilit #wrapper, do të vërejmë se deklarata e tranzicionit duket kështu:

#wrapper ( gjerësia: 2200 px; transformimi: translate3d (0, 0, 0); tranzicioni: majtas 0,5s ease-in-out; )

Tranzicioni ynë gjurmon ndryshimet në pronën e majtë. Ne nuk e përdorim më këtë pronë, kështu që tranzicioni ynë nuk mund të fillojë të funksionojë. Për të korrigjuar këtë padrejtësi të tmerrshme, zëvendësoni fjalën kyçe të pronës së majtë brenda deklaratës së tranzicionit me fjalën kyçe të pronës transformuese:

#wrapper ( gjerësia: 2200 px; transformimi: translate3d (0, 0, 0); tranzicioni: transformimi .5s ease-in-out; )

Pasi të bëni këto ndryshime, rrëshqitësi ynë do të funksionojë përsëri në të njëjtën mënyrë si më parë.

I vetmi ndryshim është se ndryshimi i rrëshqitjeve tani përdor përshpejtimin e harduerit dhe tani do të ndodhë më pa probleme dhe do të mbështetet në më shumë pajisje.

Ndryshimi automatik i rrëshqitjes në intervale prej disa sekondash

Aktualisht, sllajdet tona ndryshojnë vetëm kur klikojmë në një nga lidhjet e navigimit. Por kjo nuk është mënyra e vetme se si funksionon rrëshqitësi. Shumë rrëshqitës të përmbajtjes lëvizin automatikisht nëpër përmbajtje çdo disa sekonda, dhe ekziston gjithashtu opsioni për të kaluar në një seksion specifik duke përdorur lidhjet e navigimit.

Ju mund të shihni një shembull të një rrëshqitësi të tillë të përmbajtjes më poshtë:

Po, ky është rrëshqitësi ynë i vjetër me disa ndryshime të vogla për të lejuar që përmbajtja të lëvizë automatikisht brenda kontejnerit. Mendoni se çfarë do të bëjmë më pas?

Le t'i bëjmë rrëshqitjet të lëvizin automatikisht!

Funksioni setInterval do të na ndihmojë me këtë. Detyra kryesore e këtij funksioni është të sigurojë që kodi të ekzekutohet në intervale të rregullta:

window.setInterval(funksionToCall, vonesë);

Çdo disa sekonda (ose çfarëdo që vendosni si vlerë intervali), funksioni setInterval i thotë rrëshqitësit tonë të kalojë në bllokun tjetër të përmbajtjes.

Kur përmbajtja përfundon, rrëshqitësi kalon përmes një cikli në fillim të përmbajtjes dhe fillon nga e para. Kjo bëhet mjaft lehtë. E tëra çfarë ju duhet të bëni është të dini disa truke dhe të keni një kuptim të qartë se si funksionon rrëshqitësi juaj i përmbajtjes.

Ndryshimi i parë që duhet të bëjmë është të shtojmë kodin shtesë të nevojshëm për të përfunduar punën. Në fund të kodit që tashmë keni, shtoni rreshtat e mëposhtëm:

// // Kodi për ndryshimin automatik të sllajdeve // ​​var timeoutID; funksioni startTimer() ( // prisni 2 sekonda përpara se të telefononi goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funksioni goToNextItem() ( removeActiveLinks(); nëse (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }

Ne do të shohim se çfarë do të thotë i gjithë ky kod së shpejti. Tani shtoni të gjitha. Pasi ta keni bërë këtë, shikoni rrëshqitësin e përmbajtjes në shfletuesin tuaj. Do të shihni që rrëshqitjet e përmbajtjes ndryshojnë në kontejner çdo dy sekonda.

Na mbetet vetëm një ndryshim i rëndësishëm për të bërë. Aktualisht, rrëshqitjet rrotullohen çdo dy sekonda, pavarësisht nëse klikoni lidhjen e navigimit apo jo.

Mënyra e duhur për ta bërë këtë është të rivendosni kohëmatësin në 0 kur klikohet një nga lidhjet. Për të bërë këtë ndryshim, shtoni linjën e mëposhtme të kodit në mbajtësin e ngjarjeve setClickedItem:

Më pas, rrëshqitësi i përmbajtjes do të sillet siç pritej kur të ndërhyni dhe klikoni në lidhjen e lundrimit. Hora!

Shpjegimi i ndryshimit automatik të rrëshqitjes

Pra, na mbetet vetëm një gjë për të kuptuar. Le t'i hedhim një vështrim të shpejtë kodit që sapo shtuam dhe të kuptojmë pse bën atë që bën.

Le të fillojmë me funksionin goToNextItem/span>:

funksioni goToNextItem() ( removeActiveLinks(); nëse (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}

Kjo veçori është përgjegjëse për të mbajtur gjurmët e përmbajtjes që shfaqet aktualisht dhe çfarë do ta ndjekë atë. Për të kuptuar më mirë se çfarë po ndodh, hidhini një sy imazhit më poshtë:

Variabli ActiveLink tregon pozicionin e bllokut të përmbajtjes së shfaqur aktualisht. Çdo pjesë e informacionit shoqërohet me një element përkatës brenda grupit të lidhjeve.

Numri i përgjithshëm i elementeve brenda grupit të lidhjeve mund të vendoset nëpërmjet vetive gjatësi. Tani le të kthehemi te kodi ynë.

Deklarata if e funksionit goToNextItem thjesht kontrollon për të parë nëse ka mbetur ende përmbajtje ose nëse rrëshqitësi duhet të kthehet në fillim:

nëse (Lidhja aktive< links.length - 1) { activeLink++; } else { activeLink = 0; }

Nëse shikoni nga afër diagramin dhe kodin, do ta kuptoni logjikën. Në thelb, pasi të kemi vlerën e saktë për activeLink, gjithçka tjetër në rrëshqitësin tonë do të funksionojë thjesht si magji.

Vetë magjia kryhet duke përdorur dy linjat e mëposhtme të ofruara nga funksioni changePosition, i cili nga ana tjetër thirret me një tregues në bllokun tjetër të përmbajtjes për t'u nxjerrë:

var newLink = lidhje; ndryshimi i pozicionit (Lidhja e re);

Në këtë pikë, mënyra se si përpunohet kodi ynë nuk ndryshon nga mënyra se si është përpunuar kur lidhja është klikuar manualisht.

Pra... ne shikuam kodin në funksionin goToNextItem për të kaluar te pjesa tjetër e përmbajtjes. Për të thirrur këtë rrëshqitje, linjat e mëposhtme përdoren automatikisht:

var timeout ID; funksioni startTimer() ( // prisni 2 sekonda përpara se të telefononi goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funksioni resetTimer() (dritare.clearInterval(timeoutID); startTimer(); )

Për të filluar, përdoret funksioni startTimer. Ky funksion përmban një thirrje setInterval e cila siguron që funksioni goToNextItem thirret çdo 2 sekonda (ose 2000 milisekonda).

Thjesht shtimi i këtij funksioni (dhe thirrja e tij) do të bëjë që rrëshqitësi juaj i përmbajtjes të fillojë të lëvizë automatikisht blloqet e përmbajtjes.

E vetmja gjë që mbetet për të kuptuar është se si kohëmatësi (që unë e quajta setInterval) rivendoset kur klikoni manualisht lidhjen. Për t'u marrë me këtë, përdoret kodi i mbetur që kemi.

Metoda me të cilën rivendoset kohëmatësi është duke ndaluar funksionin setInterval dhe më pas duke e rifilluar atë. Mënyra se si bëhet kjo mund të jetë pak e ndërlikuar për të kuptuar.

Ne ruajmë identifikuesin e funksionit setInterval që thirret dhe më pas përdorim të njëjtin identifikues për të ndaluar më vonë thirrjen e të njëjtit funksion setInterval. Më lejoni të sqaroj.

Ne e ruajmë këtë identifikues në ndryshoren timeoutID dhe e inicializojmë atë në thirrjen startTimer, dhe është e përshtatshme të përdorim të njëjtin identifikues brenda funksionit resetTimer:

funksioni resetTimer() (dritare.clearInterval(timeoutID); startTimer(); )

Funksioni clearInterval merr ID-në (nëpërmjet timeoutID ) të funksionit setInterval që duam të ndalojmë.

Pasi të kemi ndaluar kohëmatësin brenda funksionit resetTimer, ne thërrasim startTimer dhe e nisim nga e para:

funksioni resetTimer() (dritare.clearInterval(timeoutID); startTimer(); )

Logjika është e thjeshtë. Kohëmatësi ndalon kur zgjidhni manualisht se cilin bllok të përmbajtjes do të shfaqet në rrëshqitës:

funksioni setClickedItem(e) ( removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = klikuarLink.itemID; changePosition(clickedLink); )

Pasi të zgjidhni një bllok të ri të përmbajtjes, rrëshqitësi ndalon për dy sekonda përpara se të kalojë në bllokun tjetër. E gjithë kjo monitorohet nga funksionet startTimer dhe resetTimer.

konkluzioni

Kjo është e gjitha, ne kemi parë se si të krijojmë një rrëshqitës të bukur të përmbajtjes duke përdorur vetëm

HTML CSS

dhe JavaScript. Mësuat gjithashtu se si të vendosni disa ndryshime për të përmirësuar performancën dhe për të aktivizuar ndryshimet automatike të bllokut të përmbajtjes.

Ndërsa vetë rrëshqitësi nuk përcaktohet nga shumë kode, kuptimi i koncepteve pas tij ndoshta do t'ju marrë pak kohë. Në artikull kam përfshirë lidhje me burime të tjera që mbulojnë tema që i kam prekur vetëm sipërfaqësisht. Mund t'i lexoni kur të keni kohë për ta bërë këtë.

Rrëshqitësit e përmbajtjes vijnë në forma dhe madhësi të ndryshme. Disa përbëhen nga disa nivele, ku përmbajtja mund të ndryshohet si vertikalisht ashtu edhe horizontalisht.

Disa rrëshqitës përmbajnë përmbajtje të përafruar vertikalisht me blloqe të vendosura mbi njëri-tjetrin. Nëse jeni mjaft proaktiv dhe dëshironi të përdorni CSS në vend të një tranzicioni

Më lejoni të filloj duke thënë se ky artikull u shkrua për të folur se si të krijoni një rrëshqitës të lëvizjes së imazhit për faqet e internetit. Ky artikull nuk është aspak edukativ në natyrë, ai shërben vetëm si një shembull se si objekti ynë i shqyrtimit mund të zbatohet. Ju mund të përdorni kodin e dhënë në këtë artikull si një lloj shabllon për zhvillime të ngjashme; shpresoj se do të jem në gjendje t'i përcjell lexuesit thelbin e asaj që kam shkruar në detaje të mjaftueshme dhe në mënyrë të arritshme.

Dhe tani në pikën, jo shumë kohë më parë më duhej të instaloja një rrëshqitës në një sit, por pasi kërkova në internet për skriptet e gatshme, nuk gjeta asgjë të dobishme, sepse disa nuk funksionuan siç kisha nevojë, ndërsa të tjerët nuk filluan fare pa gabime në tastierë. Më dukej shumë jointeresante përdorimi i shtojcave jQuery për rrëshqitësin, sepse... Edhe pse kjo do ta zgjidhë problemin, unë nuk do të kuptoj se si funksionon ky mekanizëm, dhe përdorimi i një shtojce për vetëm një rrëshqitës nuk është shumë optimale. Gjithashtu nuk më pëlqente të kuptoja skriptet e shtrembër, kështu që vendosa të shkruaj skenarin tim për rrëshqitësin, të cilin do ta shënoja vetë sipas nevojës.

Fillimisht duhet të vendosim për logjikën e vetë rrëshqitësit dhe më pas të vazhdojmë me implementimin.Në këtë fazë është shumë e rëndësishme të kuptuarit e qartë të funksionimit të këtij mekanizmi, sepse pa të nuk mund të shkruajmë kod që funksionon saktësisht ashtu siç ne. duan.

Objekti ynë kryesor do të jetë porti i pamjes, domethënë një bllok në të cilin do të shohim se si rrotullohen fotot tona, në të do të kemi një rrëshqitës, ky do të jetë blloku ynë që përmban të gjitha imazhet e rreshtuara në një rresht dhe i cili do të ndryshojë pozicioni i tij brenda vetë portit të shikimit.


Më pas, në anët brenda portës së pamjes, vertikalisht në mes, do të ketë butonat prapa dhe përpara, kur të klikojmë do të ndryshojmë gjithashtu pozicionin e mbështjellësit tonë në lidhje me pamjen, duke shkaktuar kështu efektin e lëvizjes nëpër foto. Dhe së fundi, objekti i fundit do të jenë butonat tanë të navigimit, të vendosura në fund të portës së shikimit.


Kur klikojmë mbi to, thjesht do të shikojmë numrin serial të këtij butoni dhe do ta zhvendosim në rrëshqitësin që na nevojitet, përsëri duke zhvendosur rrëshqitësin (zhvendosja do të bëhet duke ndryshuar vetinë e transformimit css, vlera e së cilës do të jetë llogaritur vazhdimisht).

Mendoj se logjika se si funksionon e gjithë kjo gjë duhet të jetë e qartë pas asaj që kam thënë më lart, por nëse diku ende lindin keqkuptime, atëherë gjithçka do të bëhet më e qartë në kodin e mëposhtëm, ju duhet vetëm pak durim.

Tani le të shkruajmë! Para së gjithash, le të hapim skedarin tonë të indeksit dhe të shkruajmë shënimin që na nevojitet atje:

• 
• 
• 
• 

Siç mund ta shihni, nuk ka asgjë të komplikuar, blloku për rrëshqitës shërben vetëm si blloku në të cilin do të vendoset rrëshqitësi ynë, brenda tij është vetë porta e pamjes, në të cilën ndodhet rrëshqitësi ynë, gjithashtu një listë e mbivendosur, këtu janë sllajde, dhe img janë foto brenda tyre. Ju lutemi kushtojini vëmendje faktit që të gjitha fotografitë duhet të jenë me të njëjtën madhësi ose të paktën përmasa, përndryshe rrëshqitësi do të duket i shtrembër, sepse dimensionet e tij varen drejtpërdrejt nga përmasat e imazhit.

Tani duhet ta stilizojmë të gjithë këtë gjë; zakonisht stilet nuk komentohen veçanërisht, por vendosa të tërheq vëmendjen për këtë në mënyrë që të mos ketë keqkuptime në të ardhmen.

trupi ( margjina: 0; mbushja: 0; ) #blloku-për-rrëshqitës ( gjerësia: 800 pikselë; diferenca: 0 automatik; margjina e sipërme: 100 px; ) #porta e pamjes ( gjerësia: 100%; ekrani: tabela; pozicioni: relative; tejmbushje: e fshehur; -webkit-user-select: asnjë; -moz-user-select: asnjë; -ms-user-select: asnjë; -o-user-select: asnjë; user-select: asnjë; ) #slidewrapper ( pozicioni: relative; gjerësia: llogaritja (100% * 4); sipër: 0; majtas: 0; diferencë: 0; mbushje: 0; -kit-webkit: 1s; -o-tranzicioni: 1s; tranzicioni: 1s; -kit web -funksioni i kohës së tranzicionit: ease-in-out; -o-transition-timing-function: ease-in-out; tranzicioni-koha-funksioni: ease-in-out; ) #slidewrapper ul, #slidewrapper li ( margjina : 0; mbushje: 0; ) #slidewrapper li ( gjerësia: llogaritur (100%/4); stili i listës: asnjë; shfaqja: inline; float: majtas; ) .slide-img (gjerësia: 100%; )

Le të fillojmë me bllok-për-rrëshqitës, ky, përsëri, është blloku ynë në faqe, të cilin do ta ndajmë për rrëshqitësin, lartësia e tij do të varet nga gjerësia e tij dhe nga përmasat e imazhit tonë, sepse porta e shikimit zë të gjithë gjerësinë e bllokut për rrëshqitës, atëherë vetë rrëshqitja ka të njëjtën gjerësi dhe, në përputhje me rrethanat, imazhi brenda tij ndryshon lartësinë e tij në varësi të gjerësisë (proporcionet ruhen). E vendosa këtë element në faqen time horizontalisht në mes, me 100 px të prera nga lart, duke e bërë pozicionin e tij më të përshtatshëm për shembull.

Elementi i pamjes, siç është përmendur tashmë, zë të gjithë gjerësinë e rrëshqitësit tonë bllok për rrëshqitje, ai ka vetinë overflow:hidden, kjo do të na lejojë të fshehim furnizimin tonë të imazhit, i cili shtrihet përtej portës së shikimit.


Vetia tjetër CSS është user-select:none, e cila ju lejon të hiqni qafe theksimin blu të elementeve individuale të rrëshqitësve kur klikoni mbi butonat disa herë.

Duke kaluar te rrëshqitësi, pse pozicioni:relativ dhe jo absolut? Gjithçka është shumë e thjeshtë, sepse... nëse zgjedhim opsionin e dytë, atëherë me vetinë e pamjes overflow:hidden, absolutisht asgjë nuk do të na shfaqet, sepse Vetë porta e shikimit nuk do të përshtatet me lartësinë e rrëshqitësit, prandaj do të ketë lartësi: 0 . Pse ka rëndësi gjerësia dhe pse e vendosim fare? Çështja është se sllajdet tona do të kenë një gjerësi të barabartë me 100% të pamjes, dhe për t'i rreshtuar ato, ne kemi nevojë për një vend ku do të qëndrojnë, kështu që gjerësia e rrëshqitësit duhet të jetë e barabartë me 100% të gjerësisë së portës së pamjes. shumëzuar me numrin e sllajdeve (në rastin tim, 4). Për sa i përket funksionit të tranzicionit dhe të kohës së tranzicionit, këtu 1s do të thotë se ndryshimi i pozicionit të rrëshqitësit do të ndodhë brenda 1 sekondës dhe ne do ta vëzhgojmë atë, dhe lehtësimi në dalje është një lloj animacioni në të cilin fillimisht shkon ngadalë dhe përshpejtohet deri në mes, dhe më pas ngadalësohet përsëri, këtu mund të vendosni vlerat sipas gjykimit tuaj.

Blloku tjetër i veçorive vendos që mbështjellësi i rrëshqitësit dhe fëmijët e tij të kenë zero mbushje, nuk nevojiten komente këtu.

Më pas, ne stilojmë rrëshqitjet tona, gjerësia e tyre duhet të jetë e barabartë me gjerësinë e portit të shikimit, por meqë... ato janë në një mbështjellës rrëshqitës, gjerësia e të cilit është e barabartë me gjerësinë e portës së pamjes shumëzuar me numrin e rrëshqitjeve, më pas për të marrë përsëri gjerësinë e portit të pamjes, duhet të ndajmë 100% të gjerësisë së rrëshqitësit me numrin e rrëshqitjeve (në rastin tim, përsëri, nga 4). Më pas do t'i kthejmë ato në elementë të linjës duke përdorur display:inline dhe do ta vendosim float në të majtë duke shtuar vetinë float:left. Rreth stilit të listës:asnjë mund të them se e përdor për të hequr shënuesin e paracaktuar nga li , në shumicën e rasteve është një lloj standardi.

Me slide-img gjithçka është e thjeshtë, imazhi do të zërë të gjithë gjerësinë e rrëshqitjes, rrëshqitja do të përshtatet në lartësinë e saj, rrëshqitësi do të përshtatet në lartësinë e rrëshqitjes dhe lartësia e portit të pamjes nga ana e saj do të marrë vlerën e lartësisë e rrëshqitësit, kështu që lartësia e rrëshqitësit tonë do të varet nga përmasat e imazhit dhe madhësia e bllokut, të parashikuar për rrëshqitësin, për të cilin kam shkruar tashmë më lart.

Unë mendoj se në këtë pikë ne kemi kuptuar stilet, le të bëjmë një shfaqje të thjeshtë rrëshqitjeje pa butona tani për tani, dhe pasi të sigurohemi që funksionon siç duhet, do t'i shtojmë dhe stilojmë ato.

Le të hapim skedarin tonë js, i cili do të përmbajë kodin rrëshqitës, mos harroni të lidhni jQuery, sepse Ne do të shkruajmë duke përdorur këtë kornizë. Nga rruga, në kohën e shkrimit të këtij artikulli, unë jam duke përdorur versionin jQuery 3.1.0. Skedari me vetë skriptin duhet të përfshihet në fund të etiketës së trupit, sepse ne do të punojmë me elementë DOM që duhet të inicializohen së pari.

Tani për tani, ne duhet të deklarojmë disa ndryshore, njëra do të ruajë numrin e rrëshqitjes që shohim në një moment të caktuar kohor në portin e shikimit, unë e quajta atë slideNow, dhe e dyta do të ruajë numrin e këtyre rrëshqitjeve të njëjta, kjo është slideCount.

var slideTani = 1; var slideCount = $("#slidewrapper").children().length);

Ndryshorja slideNow duhet të vendoset në një vlerë fillestare prej 1 sepse Kur faqja ngarkohet, bazuar në shënimin tonë, ne do të shohim rrëshqitjen e parë në portin e shikimit.

Në slideCount do të vendosim numrin e elementeve fëmijë të rrëshqitësit, gjithçka është logjike këtu.
Tjetra, ju duhet të krijoni një funksion që do të jetë përgjegjës për ndërrimin e rrëshqitjeve nga e djathta në të majtë, le ta deklarojmë atë:

funksioni nextSlide() ( )

Ne do ta quajmë atë në bllokun kryesor të kodit tonë, në të cilin do të arrijmë më vonë, por tani për tani do t'i tregojmë funksionit tonë se çfarë duhet të bëjë:

funksioni nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ($("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) other ( translateWidth = -$("#viewport").width() * (slideTani); $("#slidewrapper").css(("transformoj": "translate (" + translateWidth + "px, 0)", "-webkit- transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)", )); slideNow++; ) )

Së pari, kontrollojmë nëse jemi aktualisht në rrëshqitjen e fundit të furnizimit tonë? Për ta bërë këtë, marrim numrin e të gjitha sllajdeve tona duke përdorur $("#slidewrapper").children().length dhe e kontrollojmë atë me numrin e sllajdit tonë, nëse janë të barabartë, atëherë kjo do të thotë që duhet të fillojmë të tregojmë furnizimi përsëri, nga 1 rrëshqitje, që do të thotë se ne ndryshojmë vetinë e transformimit CSS të rrëshqitësit në përkthim (0, 0), duke e zhvendosur atë në pozicionin e tij origjinal në mënyrë që rrëshqitja e parë të jetë në fushën tonë të shikimit, le të mos harrojmë gjithashtu rreth –webkit dhe –ms për shfaqje adekuate të ndërshfletuesve (shih referencën e vetive .css). Pas kësaj, mos harroni të përditësoni vlerën e ndryshores slideNow, duke i thënë se rrëshqitja numër 1 është në pamje: slideNow = 1;

I njëjti kusht përfshin kontrollimin që numri i rrëshqitjes që shohim është brenda numrit të rrëshqitjeve tona, por nëse disi kjo nuk plotësohet, atëherë do të kthehemi përsëri në rrëshqitjen e parë.

Nëse kushti i parë nuk plotësohet, atëherë kjo do të thotë që aktualisht nuk jemi as në rrëshqitjen e fundit dhe as në ndonjë inekzistent, që do të thotë se duhet të kalojmë në tjetrin, këtë do ta bëjmë duke zhvendosur rrëshqitësin në të majtë. me vlerën e barabartë me gjerësinë e portit të pamjes, zhvendosja do të ndodhë përsëri përmes vetive të njohura të përkthimit, vlera e së cilës do të jetë e barabartë me "translate(" + translateWidth + "px, 0)", ku translateWidth është distanca me të cilën mbështjellësi rrëshqitës është zhvendosur. Nga rruga, le ta deklarojmë këtë variabël në fillim të kodit tonë:

var translateWidth = 0;

Pasi të kalojmë te rrëshqitja tjetër, le t'i themi rrëshqitjes sonë Tani që shohim rrëshqitjen tjetër: slideNow++;

Në këtë pikë, disa lexues mund të pyesin: pse nuk e zëvendësuam $("#viewport").width() me disa ndryshore si slideWidth për të pasur gjithmonë gjerësinë e rrëshqitjes sonë? Përgjigja është shumë e thjeshtë, nëse faqja jonë është adaptive, atëherë, në përputhje me rrethanat, blloku i caktuar për rrëshqitësin është gjithashtu adaptiv, bazuar në këtë mund të kuptojmë se kur ndryshoni madhësinë e gjerësisë së dritares pa ringarkuar faqen (për shembull, ndizni telefonin ana e saj), gjerësia e portit të shikimit do të ndryshojë dhe, në përputhje me rrethanat, gjerësia e një rrëshqitjeje do të ndryshojë. Në këtë rast, mbështjellësi ynë rrëshqitës do të zhvendoset në vlerën e gjerësisë që ishte fillimisht, që do të thotë se imazhet do të shfaqen në pjesë ose nuk do të shfaqen fare në portin e shikimit. Duke shkruar $("#viewport").width() në vend të slideWidth në funksionin tonë, ne e detyrojmë atë të llogarisë gjerësinë e pamjes sa herë që ndërrojmë rrëshqitjet, duke siguruar kështu që kur gjerësia e ekranit të ndryshojë ndjeshëm, ai do të lëvizë te rrëshqitja që na nevojitet.

Megjithatë, ne kemi shkruar një funksion, tani duhet ta thërrasim pas një intervali të caktuar kohor, mund ta ruajmë edhe intervalin në një variabël në mënyrë që nëse duam ta ndryshojmë atë, të ndryshojmë vetëm një vlerë në kod:

var slideInterval = 2000;

Koha në js tregohet në milisekonda.

Tani le të shkruajmë ndërtimin e mëposhtëm:

$(dokument).ready(funksioni () ( setInterval(nextSlide, slideInterval); ));

Gjithçka nuk mund të ishte më e thjeshtë këtu; përmes konstruksionit $(document).ready(function () ()) themi se veprimet e mëposhtme duhet të kryhen pasi dokumenti të jetë ngarkuar plotësisht. Më pas, ne thjesht e quajmë funksionin nextSlide me një interval të barabartë me slideInterval duke përdorur funksionin e integruar setInterval.

Pas të gjitha hapave që kemi kryer më sipër, rrëshqitësi ynë duhet të rrotullohet në mënyrë të përsosur, por nëse diçka shkon keq, atëherë problemi mund të jetë ose në versionin jQuery ose në lidhjen e gabuar të ndonjë skedari. Gjithashtu nuk ka nevojë të përjashtoni që mund të keni bërë një gabim diku në kod, kështu që unë mund t'ju këshilloj vetëm të kontrolloni dy herë gjithçka.


Ndërkohë, le të vazhdojmë, shtojmë në rrëshqitësin tonë një funksion të tillë si ndalimi i lëvizjes gjatë lëvizjes së kursorit. Për ta bërë këtë, duhet të shkruajmë gjënë e mëposhtme në bllokun kryesor të kodit (brenda $(dokumentit).ready( struktura e funksionit () ()):

$("#viewport").hover(funksion())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Për të filluar analizimin e këtij kodi, duhet të dimë se çfarë është switchInterval. Së pari, kjo është një variabël që ruan thirrjen periodike në funksionin nextSlide, thënë thjesht, kemi këtë linjë kodi: setInterval(nextSlide, slideInterval); , e kthyer në këtë: switchInterval = setInterval(nextSlide, slideInterval); . Pas këtyre manipulimeve, blloku ynë kryesor i kodit mori formën e mëposhtme:

$(document).ready(funksion () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval (Rrëshqitje tjetër, rrëshqitjeInterval); )); ));

Këtu përdor ngjarjen hover, që do të thotë "në pezullim", kjo ngjarje më lejon të gjurmoj momentin kur vendos kursorin mbi një objekt, në këtë rast portin e shikimit.

Pasi të rri pezull, pastroj intervalin, të cilin e tregoj në kllapa (ky është switchInterval ynë), më pas, i ndarë me presje, shkruaj çfarë do të bëj kur të lëviz kursorin prapa, në këtë bllok unë përsëri caktoj switchInterval tonë në një periodik thirrje për funksionin NextSlide.

Tani, nëse testojmë, mund të shohim se si reagon rrëshqitësi ynë ndaj pezullimit, duke ndaluar ndërrimin e rrëshqitjes.

Tani është koha për të shtuar butona në rrëshqitësin tonë, le të fillojmë me butonat përpara dhe prapa.

Para së gjithash, le t'i shënojmë ato:

• 
• 
• 
• 

Në fillim, ky shënim mund të jetë i pakuptueshëm, do të them menjëherë se i kam mbështjellë këto dy butona në një div me klasën prev-next-btns vetëm për lehtësinë tuaj, nuk keni pse ta bëni këtë, rezultati nuk do të ndryshoni, tani do t'u shtojmë stile dhe gjithçka do të jetë mirë Është e qartë:

#prev-btn, #next-btn ( pozicioni: absolute; gjerësia: 50px; lartësia: 50px; sfondi-ngjyra: #fff; kufiri-radius: 50%; sipër: llogaritur (50% - 25px); ) #prev- btn:hover, #next-btn:hover ( kursori: treguesi; ) #prev-btn (majtas: 20px; ) #next-btn (djathtas: 20px; )

Së pari, ne i pozicionojmë butonat tanë duke përdorur pozicionin:absolute, duke kontrolluar lirshëm pozicionin e tyre brenda pamjes sonë, më pas do të specifikojmë madhësitë e këtyre butonave dhe do të përdorim rreze-kufitare për të rrumbullakosur qoshet në mënyrë që këta butona të kthehen në rrathë. Ngjyra e tyre do të jetë e bardhë, domethënë #fff, dhe zhvendosja e tyre nga skaji i sipërm i pamjes do të jetë e barabartë me gjysmën e lartësisë së këtij porti të shikimit minus gjysmën e lartësisë së vetë butonit (në rastin tim 25 px), kështu që ne mund të vendosini ato vertikalisht në qendër. Më pas, do të specifikojmë që kur të kalojmë mbi to, kursori ynë do të ndryshojë në një tregues dhe së fundi do t'u themi butonave tanë individualisht se ata duhet të jenë 20 px larg nga skajet e tyre, në mënyrë që t'i shohim në një mënyrë që na përshtatet .

Përsëri, ju mund të stiloni elementët e faqes ashtu siç dëshironi, unë thjesht po jap një shembull të stileve që vendosa të përdor.

Pas stilimit, rrëshqitësi ynë duhet të duket diçka si kjo:


Më pas, shkoni përsëri te skedari ynë js, ku do të përshkruajmë funksionimin e butonave tanë. Epo, le të shtojmë një funksion tjetër, ai do të na tregojë rrëshqitjen e mëparshme:

funksioni 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; ) other ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideTani--; ))

Quhet prevSlide dhe do të thirret vetëm kur klikohet prev-btn. Fillimisht kontrollojmë nëse jemi në rrëshqitjen e parë apo jo, këtu kontrollojmë gjithashtu nëse rrëshqitja jonë tani ka shkuar përtej diapazonit aktual të diapozitivëve tanë dhe, nëse ndonjë prej kushteve është i vërtetë, ne do të kalojmë në rrëshqitjen e fundit, duke lëvizur rrëshqitësin me vlerën që na nevojitet. Ne do ta llogarisim këtë vlerë duke përdorur formulën: (gjerësia e një rrëshqitjeje) * (numri i rrëshqitjeve - 1), e marrim të gjithë këtë me një shenjë minus, sepse ne e zhvendosim atë në të majtë, rezulton se porta e shikimit do të na tregojë tani rrëshqitjen e fundit. Në fund të këtij blloku, ne gjithashtu duhet t'i tregojmë variablit slideNow se rrëshqitja e fundit është tani në pamjen tonë.

Nëse nuk jemi në rrëshqitjen e parë, atëherë duhet të kthehemi mbrapa 1, për këtë ne përsëri ndryshojmë vetinë e transformimit të rrëshqitësit. Formula është: (gjerësia e një rrëshqitjeje) * (numri i rrëshqitjes aktuale - 2), përsëri, ne e marrim të gjithë këtë me një shenjë minus. Por pse -2, dhe jo -1, duhet të lëvizim vetëm 1 rrëshqitje prapa? Fakti është se nëse jemi, të themi, në rrëshqitjen e dytë, atëherë ndryshorja x e vetive transform:translate(x,0) e rrëshqitësit tonë është tashmë e barabartë me gjerësinë e një rrëshqitjeje, nëse i themi se na duhet për të zbritur 1 nga numri i rrëshqitjes aktuale, atëherë do të marrim përsëri një, me të cilin mbështjellësi i rrëshqitjes tashmë është zhvendosur, kështu që do të na duhet të zhvendosim të njëjtat gjerësi të portave të pamjes me 0, që do të thotë në slideNow - 2.

Tani ne vetëm duhet të shtojmë këto rreshta në bllokun kryesor të kodit:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Këtu thjesht gjurmojmë nëse butonat tanë janë klikuar, dhe në këtë rast i quajmë funksionet që na duhen, gjithçka është e thjeshtë dhe logjike.

Tani le të shtojmë butonat e navigimit me rrëshqitje dhe të kthehemi përsëri në shënim:

• 
• 
• 
• 

Siç mund ta shihni, një listë e mbivendosur është shfaqur brenda portit të pamjes, le t'i japim identifikuesin nav-btns, brenda saj janë butonat tanë të navigimit, ne do t'u caktojmë atyre klasën slide-nav-btn, megjithatë, mund të përfundojmë me shënimi, le të kalojmë te stilet:

#nav-btns ( pozicioni: absolut; gjerësia: 100%; fundi: 20 px; mbushja: 0; margjina: 0; rreshtimi i tekstit: në qendër; ) .slide-nav-btn (pozicioni: relative; ekrani: blloku i brendshëm; stili i listës: asnjë; gjerësia: 20 px; lartësia: 20 px; ngjyra e sfondit: #fff; rreze-kufi: 50%; diferencë: 3 px; ) .slide-nav-btn:hover ( kursori: treguesi; )

Ne i japim bllokut nav-btns, në të cilin ndodhen butonat tanë, pozicionin e pronës:absolute në mënyrë që të mos e zgjasë pamjen në lartësi, sepse Slidewrapper ka veçorinë position:relative, ne vendosëm gjerësinë në 100% në mënyrë që të përqendrojmë butonat horizontalisht në lidhje me pamjen duke përdorur text-align:center , më pas duke përdorur veçorinë e poshtme i bëjmë të ditur bllokut tonë se duhet të jetë në një distancë prej 20 px nga buza e poshtme.

Me butonat bëjmë të njëjtën gjë si me sllajdet, por tani u japim atyre display:inline-block, sepse me display:inline nuk i përgjigjen gjerësisë dhe lartësisë sepse janë në një bllok absolutisht të pozicionuar. Le t'i bëjmë ato të bardha dhe, duke përdorur rrezen kufitare tashmë të njohur, t'u japim formën e një rrethi. Kur rri pezull mbi to, do të ndryshojmë pamjen e kursorit për shfaqjen e zakonshme.

Tani le të zbresim në pjesën e jQuery:
Së pari, le të deklarojmë një ndryshore navBtnId, e cila do të ruajë indeksin e butonit që kemi klikuar:

var navBtnId = 0;
$. width() * (navBtnId); $("#slidewrapper").css(("transformoj": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );

Këtu, kur klikojmë në slide-nav-btn tonë, thërrasim një funksion që së pari i cakton variablit navBtnId indeksin e butonit të klikuar, pra numrin serial të tij, pasi numërimi mbrapsht fillon nga zero, atëherë nëse ne klikoni në butonin e dytë, pastaj shkruhet në vlerën navBtnId 1. Më pas, bëjmë një kontroll ku shtojmë një në numrin serial të butonit për të marrë një numër sikur numërimi mbrapsht nuk ka filluar nga 0, por nga 1, ne Krahasoni këtë numër me numrin e rrëshqitjes aktuale, nëse ato përputhen, atëherë ne nuk do të ndërmarrim asnjë veprim, sepse rrëshqitja e dëshiruar tashmë është në portin e shikimit.

Nëse rrëshqitja që na nevojitet nuk është në fushën e shikimit, atëherë ne llogarisim distancën me të cilën duhet të lëvizim rrëshqitësin në të majtë, pastaj ndryshojmë vlerën e vetive të transformimit CSS për t'u përkthyer (e njëjta distancë në piksel, 0 ). Ne e kemi bërë këtë më shumë se një herë, kështu që nuk duhet të ketë pyetje. Në fund, ne përsëri ruajmë vlerën e rrëshqitjes aktuale në variablin slideNow; kjo vlerë mund të llogaritet duke shtuar një në indeksin e butonit të klikuar.

Kjo është e gjitha, në fakt, nëse diçka nuk është e qartë, atëherë unë do të lë një lidhje në jsfiddle, ku do të sigurohet i gjithë kodi i shkruar në material.

Faleminderit per vemendjen!

Etiketa:

• rrëshqitës jquery
• css
• animacion css3
• html

Shto etiketa