Një përzgjedhje e rrëshqitësve përshtatës. Një rrëshqitës interesant në shtojcën jQuery jQuery "Scale Carousel"

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. Ju mund të vendosni madhësitë e shfaqjes së rrëshqitjes që ju përshtaten më mirë.

3. Shtojca jQuery "slideJS"

Rrëshqitësi i imazhit me përshkrimin e tekstit.

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 me të gjithë opsionet e mundshme duke përdorur këtë shtojcë.

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

Lehtë plugin jQuery ne dizajne te 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ës 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 rrotullimin 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 mausit 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. Sllajdet mund të jenë në formën e: imazheve të thjeshta, imazheve me diçitura, imazheve me këshilla veglash, videove. 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 ndërsa dritarja e shfletuesit ndryshon madhësinë. 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 ndërmjet rrëshqitjeve.

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

Rrëshqitësi i lehtë i imazhit duke përdorur jQuery. Ka shumë opsione 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 ndryshim automatik rrëshqitje. 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.

Temdo Slider është një mjet i fuqishëm dhe i lehtë për t'u përdorur për të krijuar rrëshqitës të bukur për faqen tuaj të internetit. Karakteristikat kryesore të rrëshqitësit:

• Ju mund të zgjidhni çdo imazh ose video si sfond për çdo rrëshqitje.
• Imazhi shtesë i mbivendosjes
• Animacion me lëvizje
• Animacion kur ndryshoni sllajde

Nëse keni nevojë të krijoni një rrëshqitës të bukur "klasik" (sfondi, jo më shumë se dy shtresa grafike shtesë, titull, nëntitull, tekst dhe jo më shumë se dy butona në çdo rrëshqitje), rekomandohet të përdorni Temdo Slider, veçanërisht nëse keni nevojë rrëshqitës të ekranit të plotë dhe video në sfond.

Krijimi i një rrëshqitësi

Për të krijuar një rrëshqitës të ri, në menunë e majtë të panelit të WordPress, zgjidhni Rrëshqitës > Shto një rrëshqitje të re:

Lloji i rrëshqitjes

Cilësimi bazë i rrëshqitjes është lloji i sfondit (imazhi ose video). Në varësi të zgjedhjes së këtij parametri, ndërfaqja e cilësimeve të rrëshqitjes ndryshon: kur zgjidhni një video në vend të një grupi cilësimesh Sfondi statik shfaqet një grup Sfondi i animuar.

Sfondi i rrëshqitjes

Zgjidhni një imazh të sfondit për rrëshqitjen tuaj. Mbani në mend se imazhi i sfondit do të shtrihet për të mbushur gjerësinë e plotë të ekranit (duke ruajtur raportin e pamjes). Prandaj, rekomandohet përdorimi i imazheve Rezolucioni i plotë HD (1920 x 1080 piksele). Nëse dëshironi që rrëshqitësi të mos zërë të gjithë ekranin në lartësi, duhet të vendosni lartësinë në cilësimet e rrëshqitësit.

Imazhi i mbivendosjes

Përdoreni këtë opsion për të mbivendosur një imazh shtesë me një sfond transparent ose gjysmë transparent në krye të imazhit kryesor të sfondit. Imazhi i mbivendosur do të përsëritet në të gjithë sipërfaqen e rrëshqitjes si teksturë.

Animacion në sfond

Aktivizoni këtë opsion nëse dëshironi të animoni imazhin e sfondit. Pasi të aktivizohet, llojet e mëposhtme të animacionit bëhen të disponueshme:

• Zmadhimi në lidhje me qendrën (e parazgjedhur)
• Zmadhimi në lidhje me këndin e sipërm të majtë
• Zmadhimi në lidhje me këndin e sipërm të djathtë
• Zmadhimi në lidhje me këndin e poshtëm të majtë
• Zmadhimi në lidhje me këndin e poshtëm të djathtë

Video në sfond

Rrëshqitësi Temdo mbështet formatet video webm, mp4 dhe ogg.

Për të përdorur një video si sfond, fillimisht duhet ta ngarkoni në bibliotekën e mediave të faqes tuaj. Për ta bërë këtë, zgjidhni në panelin e majtë të panelit të WordPress Skedarët e medias > Shto të reja. Pasi të përfundojë shkarkimi i videos, kopjoni URL-në e saj në kujtesën e fragmenteve dhe kthehuni te redaktimi i rrëshqitjes. Ngjitni shtegun e skedarit të videos nga kujtesa e fragmenteve në seksionin e duhur të cilësimeve të rrëshqitjes. Rekomandohet që të përdorni video në të tre formatet sa herë që është e mundur për të mbështetur sa më shumë shfletues modernë.

Karakteristikat e rrëshqitjes

Ky seksion vendos parametrat bazë të rrëshqitjes:

• Dizajni i kokës: Mund të zgjidhni një dizajn të lehtë për t'u shoqëruar me një sfond të errët, ose një dizajn të errët për të kontrastuar kokën me një sfond të lehtë.
• Ngjyra e navigimit: Zgjidhni një ngjyrë për shigjetat majtas-djathtas dhe pikat e lundrimit në fund të rrëshqitësit
• Lëvizja në një seksion: tregoni një shigjetë që, kur klikohet, do të lëvizë faqen në vendndodhjen e specifikuar. Fut një emër për spirancën, për shembull '#contact'
• Mos shfaq titullin: Aktivizo këtë opsion nëse nuk dëshiron që titulli të shfaqet në këtë rrëshqitje.
• Mos shfaq hijen e titullit: Çaktivizo hijen e titullit për këtë rrëshqitje.
• Animacioni grafik: Zgjidhni nga dy efekte animacioni për grafikun tuaj të rrëshqitjes
• Animacioni i përmbajtjes: Zgjidhni nga dy mënyra për të animuar titullin, titrat, tekstin dhe butonat

Vendosja e stilit të përmbajtjes së rrëshqitjes

Cilësimet e stilit të përmbajtjes së tekstit të rrëshqitjes (titulli, titrat dhe teksti) vendosen në grupet përkatëse të cilësimeve:

• Titulli i rrëshqitjes
• Titrat e rrëshqitjes
• Teksti i rrëshqitjes

Në secilin prej këtyre grupeve, mund të vendosni fontin, ngjyrën, madhësinë dhe parametrat e tjerë të stilit për secilin element.

Grafika dhe grafika SVG

Këtu mund të ngarkoni një element grafik shtesë (), si dhe grafika vektoriale në formatin SVG. Për secilin prej këtyre elementeve, mund të vendosni një lidhje që do të hapet kur klikoni mbi elementin.

Butonat në rrëshqitje

Në këtë seksion mund të vendosni parametra për një ose dy butona:

• Teksti i butonit
• Lidhje
• Animacion fluturues
• Ikona

Rrëshqitni animacionin kur lëvizni

Në këtë seksion, mund të aktivizoni dhe çaktivizoni animacionin kur lëvizni nëpër të gjithë përmbajtjen e rrëshqitjes ose elemente individuale rrëshqitje. Nëse dëshironi (dhe mundeni) mund të prodhoni akordim i imët animacione duke përdorur stilet CSS.

Ruajtja e një rrëshqitjeje

Përpara se të ruani një rrëshqitje, shtoni atë në një ose më shumë rrëshqitës duke kontrolluar kutitë e duhura në seksionin Rrëshqitës. Nëse nuk keni ende ndonjë rrëshqitës, klikoni lidhjen + Shtoni një rrëshqitës të ri:

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 nga këto shtojca 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 vijnë me dokumentacion të detajuar, kështu që shtimi i efekteve ose funksioneve të reja në to nuk është 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

Rrëshqitësi i përgjegjshëm Jssor

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 | Shkarkoni

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ë ngarkojë 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 | Shkarkoni

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 | Shkarkoni

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ë reduktojë 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 | Shkarkoni

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 | Shkarkoni

A-Rrëshqitës

Demo | Shkarkoni

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;
• Efektet e bukura të tranzicionit;
• Mbështetje për platforma të ndryshme;
• E përputhshme me WordPress, Joomla, Drupal;
• Aftësia për të shfaqur përmbajtje lloje të ndryshme: imazhe, Video në YouTube dhe videot e 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, rrotullimi, turbullimi, rrokullisja dhe ndezja, fluturimi 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;
• Efektet e 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 të krijuar një dizajn të thjeshtë të dyqanit online 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 pajisje celulare. Ajo funksionon me tranzicione CSS dhe imazhet janë "grumbulluar" 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 duke përdorur 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 | Shkarkoni

Slides Minimal Responsive

Shtojcë e thjeshtë dhe kompakte ( madhësia është vetëm 1 KB), e cila krijon rrëshqitës adaptues duke përdorur elementët brenda enës. 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 | Shkarkoni

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 animacionin e rrëshqitjes ( përshpejtimi i harduerit);
• Thirrjet në API dhe metoda krejtë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. Version i ri u modifikua për të rritur shpejtësinë dhe kompaktësinë.

Demo | Shkarkoni

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

Galleria përdoret në miliona sajte për të krijuar galeri imazhesh 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 | Shkarkoni

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ë rrëshqitëse imazhi eksperimentale me burim të hapur kodi burimor, e cila është shkruar posaçërisht për të punuar me shabllone të përgjegjshme.

Ju lutem më tregoni, a është e mundur të krijoni një rrëshqitës të imazhit të sfondit duke përdorur rrëshqitësin e shkëlqyeshëm?
Google nuk ndihmon (Dokumentacioni thotë se imazhet duhet të vendosen në një bllok div. Por çfarë ndodh me imazhet e sfondit?

@charset utf-8; html,trupi,div,span,applet,objekt,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr,akronim,adresa,i madh,cite,kodi,del,dfn, em,font,img,ins,kbd,q,s,samp,i vogël, goditës,i fortë,sub,sup,tt,var,b,u,i,qendër,dl,dt,dd,ol,ul,li, grupi i fushave, forma, etiketa, legjenda, tabela, mbishkrimi,tbody,tfoot,thead,tr,th,td(sfondi: asnjë nuk përsëritet lëviz 0 0 transparent; kufiri: 0 asnjë; madhësia e shkronjave: 100%; skica: 0 asnjë; rreshtimi vertikal: vija bazë; diferenca: 0; mbushja: 0;) tabela (palosja e kufirit: kolapsi; hapësira kufitare: 0;) adresa, artikulli, mënjanë, kanavacë, detaje, titulli i figurës, figura, fundi i faqes, titulli, grupi, nav, seksion, përmbledhje (shfaq: bllok;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: kufiri-kuti; tranzicioni: të gjitha 200 ms lineare; 12 vw;

Kur përdoren veçmas, CSS3 dhe jQuery ofrojnë një gamë të gjerë aftësish. Por nëse përdoren së bashku... Atëherë ato mund t'i bëjnë efektet vërtet mbresëlënëse. Ndonjëherë lind problemi se si të organizoni më mirë dhe në mënyrë më kreative disa imazhe ose fotografi me një temë të përbashkët në një vend. Si opsion, mund të krijoni një rrëshqitës (veçanërisht pasi ka një numër të madh të tyre). Por në këtë tutorial ne do të krijojmë një galeri interaktive 3D duke përdorur CSS3 dhe jQuery. Për ta kuptuar shpejt dhe për të aplikuar rrëshqitësin në faqen tuaj të internetit, unë rekomandoj të shkarkoni versionin demo (ai është gjithashtu i disponueshëm në lajmet e plota) dhe thjesht ta bëni atë me analogji në shembull.

Një shembull i vërtetë mund të shihet këtu:

Shkarkoni

Pjesa HTML - Rrëshqitësi interesant jQuery

Enë me klasë kryesore do të përdoret për të shfaqur sfond. Dhe më pas brenda bllokut me identifikuesin immersive_slider mund të shtoni sa më shumë rrëshqitje që ju nevojiten. Butonat për lëvizjen nëpër rrëshqitje mund të hiqen nëse nuk ju nevojiten:

pjesë jQuery

Siç mund ta keni vënë re kur shikoni shembullin e rrëshqitësit, ka të ndryshme. Të gjitha cilësimet për këto tranzicione janë në funksionin e mësipërm. Le të shohim këto cilësime:

• animacion— një vlerë që përcakton se si do të ndryshojnë rrëshqitjet. Pranon vlerat "fade", "rrëshqitje" ose "fryrje". Dhe për të bërë një ndryshim vertikal të rrëshqitjeve, duhet të futni "slideUp" ose "bounceUp".
• rrëshqitës përzgjedhës— një përzgjedhës për zgjedhjen e blloqeve me rrëshqitje.
• enë— kjo veti përcakton kontejnerin kryesor, sfondi i të cilit do të ndryshojë.
• cssBlur Kjo është një veçori provë. Nëse nuk dëshironi të vendosni turbullimin, atëherë mos e vendosni këtë veçori.
• faqezim— aktivizon navigimin.
• Fillimi automatik— fillimi automatik i shfaqjes së diapozitivëve.