Rrëshqitës i përmbajtjes css i përgjegjshëm. Rrëshqitës i përgjegjshëm pa Javascript në CSS3. Boronica - një rrëshqitës i thjeshtë i imazhit jQuery

Një orë nuk qëndron në vend, por me të ka përparim. Çmimi është rritur dhe hapur në internet. Tashmë është e mundur të shënohet ndryshimi i jakut zovnishniy viglyad faqet, veçanërisht popullariteti i madh i dizajnit adaptiv. Në të njëjtën kohë me tsimin e të ardhurve të shumtë rrëshqitëse jquery të përgjegjshme, Galeritë, karuselët dhe shtojcat e tjera.
1. Rrëshqitës i Postimeve Horizontale të përgjegjshme

Karusel horizontal i përgjegjshëm udhëzime të hollësishme me instalim. Viconana fitoi në një stil të thjeshtë, nëse mundeni, stil për veten tuaj.

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

Ky rrëshqitës është i përshtatshëm për çdo sit. Këtu mund të marrësh Glide.js me kodin e shfaqur. Ngjyra e rrëshqitësit mund të ndryshohet lehtësisht.

3. Slideshow i përmbajtjes së anuar

Rrëshqitës i përmbajtjes së përgjegjshme. Rodzinka këtë rrëshqitës effect një efekt imazhi 3d, si dhe animacione të ndryshme shfaqen në të njëjtin rend.

4. Rrëshqitës i kanavacës HTML5

Një rrëshqitës edhe më i bukur dhe armiqësor me pjesë interaktive. Vikonaniy vin për shtesën e kanavacës HTML5,

5. Rrëshqitës "Ndryshimi i imazhit"

Rrëshqitës me efekt morfimi (Transformim i qetë nga një objekt në tjetrin). Në këtë aplikacion, një rrëshqitës është i mirë për një portofol të një zhvilluesi të uebit ose një studio në internet për një pamje të një portofoli.

6. Rrëshqitës rrethor

Rrëshqitësi në cola viglyadi do të ndryshojë imazhin.

7. Rrëshqitës me madhësinë e sfondit

Një rrëshqitës adaptues për ndryshimin dhe rregullimin e sfondit.

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

Rrëshqitës i thjeshtë, i lehtë dhe i përgjegjshëm për sitin.

9. Slicebox - rrëshqitës i imazhit jQuery 3D(PPRDITSIM)

Versioni i azhurnuar i rrëshqitësit Slicebox me veçori të reja dhe të reja.

10. Rrjeti i Imazheve me Përgjegjshmëri të Animuar Falas

Një shtojcë jQuery për rrënjën e rrjetit të shurdhër të fotografive, i cili do të ndryshojë simbolet, animacionet dhe kohën fitimtare dhe dinamike. Ju mund të shikoni sfondin ose një element dekorativ në sit, në mënyrë që të rregulloni pamjen e gjallë të imazheve dhe kalimeve të reja. Shtojca e viconies në opsionet decilkoh.

11. Flexslider

Një shtojcë universale për faqen tuaj të internetit. Shtojca e pamjeve Tsey në opsionet e rrëshqitësit të dekaleve dhe karuselët.

12. Korniza e fotografive

Fotorama- një shtojcë universale. Unë kam shumë nalashtuvan, gjithçka është e shpejtë dhe e lehtë, є aftësia për të parë rrëshqitjet në të gjithë ekranin. Rrëshqitësi mund të përdoret si madhësi fikse dhe përshtatës, me rrëshqitje ose pa, me rrotullim rrethor dhe pa asgjë tjetër.

P.S.Duke vënë rrëshqitësin në fiksim, futa njërën nga thërrimet

13. Bezkoshtovna dhe rrëshqitës galeri 3D përshtatës me miniatura.

Rrëshqitës eksperimental i galerisë 3DPanelLayout me një sitë i tsіkavimi ndikon animacione.

14. Rrëshqitës në css3

Rrëshqitës adaptues css3 me përmbajtje të qetë dhe animacion të lehtë.

15. WOW Slider

Wow slider- imazhi i tërë rrëshqitës me truk efektet vizuale.

17. Elastike

Një rrëshqitës elastik me përshtatshmëri të madhe dhe rrëshqitje.

18. Çarë

Një rrëshqitës adaptues i bazuar në ueb me animacione css3. Rrëshqitës Viconano në dy versione. animacioni keqtrajtohet për ta përfunduar ëmbël dhe bukur.

19. Galeria adaptive e fotografive plus

Rrëshqitës i thjeshtë pa postë me imazhe të para-instaluara.

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

Rrëshqitës i përgjegjshëm pa postë për WP.

21. Rrëshqitës i Përmbajtjes Parallax

Rrëshqitës për efekt parallaks dhe kontroll të elementit të lëkurës për CSS3 shtesë.

22. Rrëshqitës me muzikë të lidhur

Një rrëshqitës për pamjen e kodit të daljes JPlayer. Tsey slider prezantim nagaduє me muzikë.

23. rrëshqitës jmpress.js

Rrëshqitës përshtatës i pamjeve në jmpress.js dhe për të lejuar efektet vikoristovuvati deyaki tsikavi 3D para rrëshqitjeve.

24. Slideshow i Shpejtë Hover

Shfaqje rrëshqitëse me përzierje të shpejta të rrëshqitjeve. Rrëshqitja ndryshon kur rri pezull sipër.

25. Figurë fizarmonikë me CSS3

Imazh fizarmonik prapa css3.

26. Shtojca e Galerisë së Optimizuar me Prekje

tse galeri e përgjegjshme yaka është optimizuar për bashkëngjitjet me prekje.

Galeria 27.3D

Galeria 3D e Mureve- Synoni për shfletuesin Safari, efekti i defektit 3D do të jetë i dukshëm. Nëse jeni të mahnitur nga ky shfletues, atëherë funksionaliteti do të jetë në rregull, por efekti 3D do të jetë i dukshëm.

28. Rrëshqitës me faqe

Rrëshqitës i përgjegjshëm me numërimin e shiritave anësorë pas ndihmës së rrëshqitësit të jQuery UI. Ideja e një poliagu është në atë që është vetëm një koncept i thjeshtë i lundrimit. Aftësia për të rikthyer të gjitha imazhet ose për të shfaqur rrëshqitje në ekran.

29. Imazhi i Montazhit me jQuery

Rostashuvannya automatikisht imazhin në zonën e gjerësisë së ekranit. Gjëja është edhe më e rëndësishme kur zhvilloni një sit portofoli.

Galeria 30.3D

Rrëshqitës i thjeshtë rrethor 3D në css3 dhe jQuery.

31. Modaliteti për ekran me efekt 3D në css3 dhe jQuery

Një rrëshqitës me një pamje të ekranit të gjerë të figurës me një tranzicion të bukur.

Zgjedhja e lirë Rrëshqitës HTML dhe CSS shembuj kodesh: kartë, krahasim, ekran i plotë, i përgjegjshëm, i thjeshtë, Etj. Përditësimi i koleksionit qershor 2018. 7 artikuj të rinj.

Përmbajtja

Artikuj të ngjashëm


Rreth kodit

Një grup ekranesh në bord në HTML / CSS / JS. Një eksperiment personal me shtresimin e ikonave PNG, kalimet CSS3 dhe flexbox.

Rrëshqitës i kartës së informacionit HTML, CSS dhe JavaScript.
Bërë nga Andy Tran
23 nëntor 2015

Rrëshqitës i fotografive që punon në shfletuesit desktop dhe celular.
Bërë nga taroni
29 shtator 2014

Krahasimi (Para / Pas) Rrëshqitësit


Rreth kodit

Një rrëshqitës i thjeshtë dhe i pastër i krahasimit të imazhit, plotësisht i përgjegjshëm dhe gati për prekje i bërë me CSS dhe jQuery.


Rreth kodit

Një rrëshqitës para dhe pas me vetëm html dhe css.


Rreth kodit

Duke luajtur me një ide të re duke përdorur rrëshqitësin e imazhit tim dy shtresa para / pas. Duke e mbajtur atë minimal. Duke e mbajtur vanilje. Pëlqejeni nëse është e dobishme :)

Vanilla JS, minimale, e bukur për tu dukur.
E bërë nga Huw
3 korrik 2017


Rreth kodit

Një element rrëshqitës "me ekran të ndarë" me JavaScript.

Një eksperiment i vogël për një rrëshqitës para dhe pas të gjithë brenda një SVG. Maskimi e bën atë mjaft të thjeshtë. Meqenëse është e gjitha SVG, imazhet dhe titrat shkojnë mirë së bashku. Shtojcat e GreenSock Draggable dhe ThrowProps u përdorën për kontrollin e rrëshqitësit.
Prodhuar nga Craig Roblewsky
17 Prill 2017

Përdor hyrjen me porosi të diapazonit për rrëshqitësin.
Prodhuar nga Dudley Storey
14 tetor 2016

Rrëshqitës krahasues i krahasimit të figurës me HTML, CSS dhe JavaScript.
Prodhuar nga Ege Görgülü
3 gusht 2016

Rrëshqitëse krahasimi para-dhe-pas video HTML5, CSS3 dhe JavaScript.
Prodhuar nga Dudley Storey
24 Prill 2016

Një rrëshqitës i dobishëm për tërheqje për të krahasuar shpejt 2 imazhe, të mundësuar nga CSS3 dhe jQuery.
Prodhuar nga CodyHouse
15 shtator 2014

Rrëshqitës me ekran të plotë

Rreth kodit

Rrëshqitës i thjeshtë i bazuar në hyrjet e radios. 100% e pastër HTML + CSS. Punon edhe me çelësat e shigjetave.

Përgjigje: po

Varësitë: -


Rreth kodit

Efekt i këndshëm kalimi për rrëshqitësin në ekran të plotë.


Rreth kodit

Rrëshqitës rrëshqitës paralaks horizontal me Swiper.js.


Rreth kodit

Rrëshqitëse e qetë 3D e perspektivës në lëvizjen e miut.

Rrëshqitës i imazhit të heroit me ekran të plotë (tema e paneleve të rrëshqitjes) me HTML, CSS dhe JavaScript.
E bërë nga Tobias Bogliolo
25 qershor 2017

Një gjë ndërveprimi rrëshqitëse duke përdorur efektet e Shpejtësisë dhe Shpejtësisë (UI Pack) për të rritur animacionin. Animacioni shkaktohet përmes butonave të shigjetave, klikimit të navigimit ose folesë rrotulluese. Ky version përfshin kufijtë si pjesë e ndërveprimit.
E bërë nga skela Stephen
11 maj 2017

Rrëshqitës i thjeshtë në një stil minimal për të shfaqur imazhe. Një pjesë e imazhit shfaqet në çdo rrëshqitje.
Bërë nga nathan Taylor
22 janar 2017

Gjëja është shumë e lehtë e personalizueshme. Mund të ndryshoni me siguri fontin, madhësinë e shkronjave, ngjyrën e shkronjave, shpejtësinë e animacionit. Shkronja e parë e një vargu të ri në grup në JS do të shfaqet në një rrëshqitje të re. Lehtë për të krijuar (ose fshirë) një rrëshqitje të re: 1. Shtoni një qytet të ri në grupin në JS. 2. Ndryshoni numrin e ndryshueshëm të rrëshqitjeve dhe vendosni një imazh të ri në listën scss në CSS.
Prodhuar nga Ruslan Pivovarov
8 tetor 2016

  1. Rruga e kapjes për maskimin e kufirit të drejtkëndëshit të imazhit (vetëm webkit).
  2. Blend-mode për këtë maskë.
  3. Sistemi i zgjuar i ngjyrave, thjesht vendosni emrin dhe vlerën tuaj të ngjyrës në hartën sass dhe më pas shtoni elementin e klasës së duhur me këtë ngjyrë dhe gjithçka do të funksionojë!
  4. Kredite interesante të menusë (klikoni butonin e vogël në qendër të demonstrimit).
  5. Vanilje js me vetëm< 200 lines of code (basically it’s just adds/removes classes).
Prodhuar nga Nikolay Talanov
7 Tetor 2016

Ky rrëshqitës i anuar me rrotullim bazuar në JS dhe CSS të pastër (pa biblioteka).
Prodhuar nga Victor Belozyorov
3 shtator 2016

Një animacion rrëshqitës me modelin Pokemon.
Bërë nga pham mikun
18 gusht 2016

Rrëshqitës HTML, CSS dhe JavaScritp me animacion kompleks dhe tekst me kënd të përgjysmuar.
Prodhuar nga Ruslan Pivovarov
13 korrik 2016

Efekti paraleks i rrëshqitësit me HTML, CSS dhe JavaScript.
Krijuar nga Manuel Madeira
28 qershor 2016

Rrëshqitës HTML, CSS dhe JavaScript me efekt valëzimi.
Prodhuar nga Pedro Castro
21 maj 2016

Rrëshqitës zbulues Clip-Path me HTML, CSS dhe JavaScript.
Krijuar nga Nikolay Talanov
16 maj 2016

GSAP + Rrëshqitës i shkëlqyeshëm me vrojtim të rrëshqitjeve të mëparshme / të radhës.
Prodhuar nga Karlo Videk
27 Prill 2016

Rrëshqitës i faqeve të plota HTML, CSS dhe JavaScript.
E prodhuar nga joseph martucci
28 shkurt 2016

Prototip i plotë i rrëshqitësit me HTML, CSS dhe JavaScript.
Prodhuar nga Gluber Sampaio
6 janar 2016

Një shfaqje e rrëshqitshme me ekran të plotë, e llojllojshme e animuar me Greensocks TweenLite / Tweenmax.
Prodhuar nga Arden
12 dhjetor 2015

E bërë nga Arden
5 dhjetor 2015

Rrëshqitës me ekran të plotë (Afati kohor GSAP) # 1 me HTML, CSS dhe JavaScript.
E bërë nga Diaco M.Lotfollahi
23 nëntor 2015

Rrëshqitës HTML dhe CSS me efekte të personalizuara.
Krijuar nga Nikolay Talanov
12 Nëntor 2015

Rrëshqitës tërheqës me ekran të plotë me paralaks me HTML, CSS dhe JavaScript.
Krijuar nga Nikolay Talanov
12 Nëntor 2015

Vërtetim i konceptit rrëshqitës rrotullues. Përdor rrugën e kapjes dhe shumë matematikë.
Bërë nga Tyler Johnson
16 Prill 2015

Një rrëshqitës i thjeshtë CSS & jQuery me ekran të plotë duke përdorur smoothe translateX dhe translate3d!
Bërë nga Joseph
19 gusht 2014

Rrëshqitës të përgjegjshëm

Rreth kodit

Images Opacity Slider

Rrëshqitës i errësirës së imazheve në HTML dhe CSS.

Shfletues të pajtueshëm: Chrome, Edge, Firefox, Opera, Safari

Përgjigje: po

Varësitë: -

Rreth kodit

Paraqitja e rrëshqitjeve fleksibël të grumbulluara

Ky shembull ilustron mënyrën e krijimit të paraqitjes së rrëshqitjeve të grumbulluara njëra mbi tjetrën (veçanërisht e dobishme për kalimin e zbehur / daljes). Shtë arritur pa vendosur lartësinë e tyre dhe shmangur pozicionin: absolut; kështu që ata janë plotësisht fleksibël dhe të lehtë për tu mbajtur në rrjedhën normale të faqeve.

Shfletues të pajtueshëm: Chrome, Edge, Firefox, Opera, Safari

Përgjigje: po

Varësitë: -

Rreth kodit

Rrëshqitës i përgjegjshëm

Rrëshqitës i animuar i përgjegjshëm në HTML, CSS dhe JavaScript.

Shfletues të pajtueshëm: Chrome, Edge, Firefox, Opera, Safari

Përgjigje: po

Varësitë: animate.css

Rreth kodit

Rrëshqitës me tekst të maskuar

Rrëshqitës vetëm CSS me tekst të maskuar.

Shfletues të pajtueshëm: Chrome, Edge (i pjesshëm), Firefox, Opera, Safari

Përgjigje: po

Varësitë: -


Rreth kodit

Imazhi dhe përmbajtja me efekt parallaks.

Rreth kodit

Galeria e rrëshqitjeve vetëm me CSS.

Shfletues të pajtueshëm: Chrome, Edge, Firefox, Opera, Safari

Përgjigje: po

Varësitë: -

Rreth kodit

Rrëshqitës i pastër HTML / CSS

Rrëshqitës i pastër HTML / CSS me shiritin e përparimit rrethor SVG.

Shfletues të pajtueshëm: Chrome, Edge (i pjesshëm), Firefox (i pjesshëm), Opera, Safari

Përgjigje: po

Varësitë: font-awesome.css


Rreth kodit

Një eksperiment për të krijuar një rrëshqitës vertikal plotësisht të përgjegjshëm me figura të vogla duke përdorur vetëm CSS, dhe duke ruajtur raportin e aspektit të imazheve.


Rreth kodit

Një rrëshqitës / karusel i thjeshtë i imazhit Flexbox i bërë me JavaScript vanilje.


Rreth kodit

Ky është një eksperiment që simulon një efekt të turbullimit të lëvizjes sa herë që rrëshqitja ndërrohet. Përfiton nga filtri SVG Gaussian Blur dhe disa animacione të kuadrove CSS. Edhe pse efekti nuk kërkon ndonjë Javascript për të punuar siç duhet, në këtë shembull Javascript përdoret vetëm për funksionalitetin e rrëshqitësit.


Rreth kodit

Cool animates slider me JS.


Rreth kodit

Ky është një eksperiment se si modelet SVG mund të na ndihmojnë të krijojmë imazhe të maskuara për një rrëshqitës të imazhit vetëm me CSS.

Eksplorimi i disa kalimeve rrëshqitëse. Rrëshqitës rrëshqitës me opsionin paralaks të aktivizuar. Duke luajtur me filtrat CSS kryesisht këtu.
Krijuar nga Mirko Zorić
12 qershor 2017

Rrëshqitës i thjeshtë GSAP me disa animacione delikate midis.
Prodhuar nga Goran Vrban
9 qershor 2017

UI rrëshqitëse me HTML, CSS dhe JavaScript.
E punuar nga Mergim Ujkani
6 qershor 2017

Slider GSAP virsion 2.
Bërë nga em an
4 maj 2017

Një rrëshqitës i vogël i tranzicionit duke përdorur një marrëveshje të thjeshtë shtimi të klasës. Duhet të zbutni pak kohët dhe të vendosni për qasjen më të mirë për celularin (thjesht grumbulloni, shtoni ngjarje me prekje, bëni imazhe me pamje të plotë, etj. Mbështet rrotull rrotullues (rrotullim rrotullues), butona nav dhe çelësa shigjetash. Mund të rrisë mbështjellësin e përmbajtjes për t'i bërë imazhet të mbushin portën e shikimit në gjendjen e tyre jo animative, e cila është gjithashtu disi e lezetshme.
E bërë nga skela Stephen
3 janar 2017

Përdorimi i kufirit të imazhit dhe shtegut të klipit CSS për të krijuar një efekt animacioni rrëshqitës.
Bërë nga emily hayman
31 Dhjetor 2016

Rrëshqitës i vogël i ndërtuar me flexbox. Disi i përgjegjshëm, dhe mund të ketë elemente fikse krahas zonës së rrëshqitësit.
E bërë nga Roberti
28 Nëntor 2016

Rrëshqitës i kanavacës HTML, CSS.
E bërë nga Nvagelis
29 tetor 2016

Rrëshqitës i qetë HTML, CSS dhe JavaScript 3D.
Krijuar nga Eduardo Allegrini
19 tetor 2016

Rrëshqitës i kekëve HTML dhe CSS me spërkatje!
Prodhuar nga Jamie Coulter
14 tetor 2016


Bërë nga mario s maselli
12 tetor 2016

Eksplorimi i animacionit UI # 2 me HTML, CSS dhe JavaScript.
Bërë nga mario s maselli
22 shtator 2016

Eksplorimi i animacionit UI # 3 me HTML, CSS dhe JavaScript.
Bërë nga mario s maselli
22 shtator 2016

Ecommerce Slider v2.0 me HTML, CSS dhe JavaScript.
Prodhuar nga Pedro Castro
17 shtator 2016

Rrëshqitës i pastër HTML, CSS dhe JavaScript me sfond të lakuar.
Prodhuar nga Ruslan Pivovarov
13 shtator 2016

Eksplorimi i animacionit UI # 1 me HTML, CSS dhe JavaScript.
Bërë nga mario s maselli
8 shtator 2016

Shijoni fuqinë e CSS: Lart dhe poshtë çdo imazh të mesëm dhe rrëshqitës të faqosur me lightbox.
E prodhuar nga Kseso
15 gusht 2016

Ekspozimi i dyfishtë është teknikë fotografike që kombinon 2 imazhe të ndryshme në një imazh të vetëm.
Bërë nga misaki nakano
3 gusht 2016

Rrëshqitës duke përdorur kapësin e pronësisë CSS3.
Prodhuar nga Pedro Castro
1 maj 2016

Rrëshqitës i përgjegjshëm CSS.
E bërë nga geekwen
19 Prill 2016

Ky është një eksperiment i thjeshtë rrëshqitës që shfaq fjalë me kuptime të bukura të cilat nuk mund të përkthehen drejtpërdrejt. Përqendrimi: tipografi elegante dhe kalime të thjeshta por tërheqëse.
Krijuar nga Joe Harry
5 Prill 2016

Ideja e animacionit është të ndryshojë vlerën e shtegut të klipit CSS, duke bërë kështu një efekt maskimi.
Bërë nga Bhakti Al Akbar
31 Mars 2016

Rrëshqitës i pikave me HTML, CSS dhe JavaScript.
Prodhuar nga Derek Nguyen
16 mars 2016

Rrëshqitës i efektit Prism me HTML, CSS dhe JavaScript.
Bërë nga fituesi
12 Mars 2016

Rrëshqitje e galerisë së sfondit me HTML, CSS dhe JavaScript.
E bërë nga Ron Gierlach
30 Nëntor 2015

Zgjidhje rrëshqitëse HTML, CSS dhe JavaScript.
Prodhuar nga Jürgen Genser
30 shtator 2015

Një rrëshqitës i produktit i mundësuar nga Sequence.js. Sequence.js - Kuadri i animacionit CSS i përgjegjshëm për krijimin e rrëshqitësve, prezantimeve, banderolave ​​dhe aplikacioneve të tjera të bazuara në hapa.
E bërë nga Ian Lunn
15 shtator 2015

Rrëshqitës i vogël i personalizuar.
Prodhuar nga Bram de Haan
11 gusht 2015

Rrëshqitës i përgjegjshëm GTA V me HTML, CSS dhe JavaScript.
Bërë nga eduard mayer
24 janar 2014

Likeshtë si një rrëshqitës, por rrotullohet në mënyrë kubike për arsye të panjohura.
Prodhuar nga Eric Brewer
4 dhjetor 2013

Prodhuar nga Hugo DarbyBrown
28 gusht 2013

Rrëshqitës të thjeshtë

Rrëshqitës i mbivendosjes së imazhit me HTML, CSS dhe vanilje JavaScript.
E bërë nga Yugam
7 qershor 2017

Rrëshqitës i imazhit me HTML dhe CSS.
E bërë nga Joshua Hibbert
16 qershor 2016

Rrëshqitës i imazhit me shumë boshte

Rrëshqitës i imazhit me shumë boshte me HTML, CSS dhe JavaScript.
E prodhuar nga Burak Can
22 korrik 2013

Rrëshqitës Cube, një eksperiment i vogël me transformimet 3D HTML5 / CSS3.
Krijuar nga Ilya K.
26 qershor 2013

Nëse keni nevojë të shtoni një imazh rrëshqitës jQuery në faqen tuaj, atëherë në statistika do të dini përshkrimin e shtojcave të kërkuara. E parëndësishme për ata me jQuery, thjesht thjeshtimi i robotit me JavaScript, dhe shtesat e kërkuara më parë, për të përshpejtuar procesin e dizajnimit të uebit.

Ne mund të bëjmë ndryshime në veprimet e shtojcave dhe rrëshqitësit e rinj, pasi shfaqen më shumë informacione në lidhje me faqen tonë.

Për rrëshqitësit më të mëdhenj, thjesht shtoni tituj, imazhe dhe dridhje për ndryshimin e rrëshqitjeve, të cilat furnizohen menjëherë me një rrëshqitës. Të gjitha shtojcat mbikëqyren nga dokumentacioni i raportit, kështu që shtimi i efekteve të reja në to ose funksionet nuk janë një magazinë me vështirësi të mëdha. Ju mund të ndryshoni shkaktarët për të parë nëse programuesi jQuery ju këshillon.

Tendencat kryesore, të tilla si dizajni i përgjegjshëm, janë edhe më të rëndësishme për projektet në internet, megjithatë, zbatojnë një shtojcë ose një skenar. Të gjithë elementët e procesit të bërjes së lëkurës nga plug-in janë madje të shurdhër. Çdo gjë që ndodhi në 2014 është përfshirë në listë.

Rrëshqitës i imazhit JQuery

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

Jo shumë kohë më parë kam përdorur një rrëshqitës funksional jQuery dhe mund të kthehesha në sytë e mi, në mënyrë që të përballoj robotin tim edhe më mirë. Fitoni hakmarrje në mundësitë e tij të pakufizuara, të cilat mund të zgjerohen për shfaqjen e kodit dalës të rrëshqitësit:

  • Dizajn të përgjegjshëm;
  • Më shumë se 15 cilësime;
  • Më shumë se 15 efekte të imazhit;
  • Galeria e imazheve, karuselëve, imazheve të ekranit kryesor;
  • Rrotullues vertikal i banderolave, lista e rrëshqitjeve;
  • Pidtrimka video.

demo | shantazh

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

Një nga përdoruesit e kësaj shtojce është një imazh slideshow. Win është madje kompakt, kështu që pasi madhësia e skedarëve jQuery është vetëm 2.5 KB, kështu që ju mund ta bëni atë shpejt dhe me efikasitet:

  • Paraqitja e përgjegjshme;
  • Optimizimi i SEO;
  • Pidtrimka me shfletues të ndryshëm;
  • Thjesht shkoni te imazhi;
  • Madhësia e arkivit është 2.5 KB.

demo | shantazh

Rrëshqitës i lajmeve vertikale të Jquery

Rrëshqitës i keq dhe kafe jQuery, shenja për burime të reja nga kthesa e botimit nga ana e majtë dhe tek imazhet e personit me dorën e djathtë:

  • Dizajn të përgjegjshëm;
  • Kolona vertikale që përzien novin;
  • Titujt e zgjeruar.

demo | shantazh

Rrëshqitës Wallop

Rrëshqitësi nuk merr hak ndaj JQuery, por dua ta prezantoj, sepse është edhe më kompakt dhe ju lejon të ndryshoni orën e faqeve të ngarkuara. Më jep fisnikërinë, nëse do të nderohesh:

  • Paraqitja e përgjegjshme;
  • Dizajn i thjeshtë;
  • Opsione të ndryshme për ndryshimin e rrëshqitjeve;
  • Kodi minimal JavaScript;
  • Madhësia totale 3 KB.

demo | shantazh

Galeria Polaroid e stilit të sheshtë

Një galeri në stilin e dokumenteve në tryezë me një paraqitje të shurdhër dhe një dizajn të bukur duhet të fajësohet për tërheqjen tuaj. Më i përshtatshëm për tableta dhe ekrane të mëdhenj:

  • Rrëshqitës i përgjegjshëm;
  • Dizajn i sheshtë;
  • Rrëshqitje Vipadkova zmіna;
  • Qasje e jashtme në kodin dalës.

demo | shantazh

A-Slider

demo | shantazh

HiSlider - Rrëshqitës i imazhit HTML5, jQuery dhe WordPress

HiSlider duke prezantuar një shtojcë të re të rrëshqitësit jQuery, e cila mund të përdoret për të krijuar një galeri të gjithanshme të imazheve me kalime fantastike:

  • Rrëshqitës i përgjegjshëm;
  • Jo vimagaє njohuri për programin;
  • Një numër modelesh dhe lëkurash hyjnore;
  • Tranzicione të bukura;
  • Pidtrimka e platformave të reja;
  • Pajtueshmëria me WordPress, Joomla, Drupal;
  • Mundësia e shfaqjes së përmbajtjes tipe te ndryshme: Imazhi, video YouTubeі video Vimeo;
  • Përshtatje e shkëlqyeshme;
  • Funksione shtesë kafe;
  • As obsyag përmbajtje vidobrazuvany.

Demo | Zavantazhiti

Wow slider

WOW Slider është një rrëshqitës i imazhit jQuery me efekte vizuale hyjnore ( domino, kthesë, rozmittya, puç dhe fjetje, vilit, blinds) Temp shabllone profesionale.

WOW Slider dorëzohet së bashku me masterin e instalimit, duke ju lejuar të krijoni rrëshqitës fantastikë në pak sekonda pa pasur nevojë të rendisni kodin dhe të redaktoni imazhin. Gjithashtu i disponueshëm për shkarkimin e versionit të shtojcës për Joomla dhe WordPress:

  • Rritja e përshtatshmërisë;
  • Shikoni të gjithë shfletuesit dhe të gjitha llojet e bashkëngjitjeve;
  • Pidtrimka e lidhjeve shqisore;
  • Instalim i lehtë në WordPress;
  • Pafuqia në nastuvanny;
  • SEO -e optimizuar.

Demo | Zavantazhiti

Nivo Slider është një shtojcë jQuery pa ueb

Nivo Slider është më e bukura dhe më e thjeshta në imazhin rrëshqitës Victorian. Shtojca Nivo Slider është kotless dhe e licencuar nga MIT:

  • JQuery 1.7 e nevojshme;
  • Tranzicion i bukur efikas;
  • E thjeshtë ast e keqe në nalashtuvannі;
  • Kompakt dhe përshtatës;
  • Kodi i shfaqjes;
  • I tendosur dhe i thjeshtë;
  • Një numër modelesh të reja;
  • Përpunimi i imazhit është automatik.

Demo | Zavantazhiti

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

Ideja bazohet në rrëshqitësit nga Apple, në të cilët ka disa elementë të vegjël që mund të gjeni efekte të ndryshme animacioni. Shitësit me pakicë janë përpjekur të integrojnë konceptin e mini-vimogues për të krijuar një dizajn të thjeshtë për një dyqan online, në të cilin elementët "villayut" janë kategori të ndryshme:

  • Paraqitja e përgjegjshme;
  • Dizajn minimalist;
  • Përcaktimi i efikasitetit dhe ndryshimi i rrëshqitjeve.

Demo | Zavantazhiti

Rrëshqitës i fuqishëm i imazhit jQuery

Një rrëshqitës edhe më i thjeshtë, i cili merr hua 100% të gjerësisë së anës dhe përshtatet me madhësinë e ekraneve anekset e lëvizshme... Fitimi bëhet me kalimet CSS dhe imazhi "grumbullohet" menjëherë me spiranca. Spiranca mund të jetë një zëvendësim për një vizion, nëse nuk doni ta lidhni atë me figurën.

Kur instalohet, rrëshqitësi do të lëvizë në 100% të gjerësisë së ekranit. Ju gjithashtu mund të ndryshoni automatikisht madhësinë e imazhit të rrëshqitjes:

  • Rrëshqitës jQuery i përgjegjshëm;
  • povnorozm_rny;
  • Dizajn minimalist.

Demo | Zavantazhiti

Rrëshqitës elastik i përmbajtjes + pozibnik

Rrëshqitësi elastik i përmbajtjes rregullon automatikisht gjerësinë dhe lartësinë e zonës së mbetur nga madhësia e elementit Batkiv. Një rrëshqitës i thjeshtë jQuery. Ajo ruhet në një zonë rrëshqitëse në male, dhe në një panel të skedave të navigimit në pjesën e poshtme. Rrëshqitësi rregullon gjerësinë dhe lartësinë e tij sipas madhësisë së enës Batkiv.

Kur shikoni ekranet e vogla diagonale, skedat e navigimit shndërrohen në ikona të vogla:

  • Dizajn të përgjegjshëm;
  • Lëvizja me klikimin e Mishës.

Demo | Zavantazhiti

Rrëshqitës pa pagesë 3D Stack

Rrëshqitës eksperimental, rrëshqit mbi imazhin në 3D. Dy pirgje përbëjnë grumbuj letre, në mes të një ore shikoj imazhin në qendër të rrëshqitësit:

  • Dizajn të përgjegjshëm;
  • Kalimi i rrokullisjes;
  • Efekt 3D.

Demo | Zavantazhiti

Slid Slid Slid Slider bazuar në JQuery dhe CSS3 + Kerіvnіstvo

Ju mund të shihni se si të hapni rrëshqitësin me rodzinka: ideja e një shtylle është në faktin se ju mund të "shfaqni" dhe shfaqni rrëshqitjen aktuale në një pamje të tillë, në atë orë, nëse e shihni atë që vjen gjithsesi në para imazhit. JQuery fituese dhe animacione CSS, ne mund të krijojmë efekte unike të tranzicionit:

  • Dizajn të përgjegjshëm;
  • Split-tranzicioni;
  • Rrëshqitësi i redaktimit.

Demo | Zavantazhiti

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

Çdo kambanë dhe bilbila dhe madhësi të panevojshme, me madhësi 3 KB. Merrni një kod HTML për rrëshqitjet tuaja, shtrijeni atë përtej CSS. Çdo gjë e lidhur me Unslider mund të ndahet në GitHub:

  • Pidtrimka me shfletues të ndryshëm;
  • Mbështetje e tastierës;
  • Rregullimi i lartësisë;
  • Dizajn të përgjegjshëm;
  • Hyrja shqisore.

demo | shantazh

Rrëshqitje minimale të përgjegjshme

Shtojcë e thjeshtë dhe kompakte ( Madhësia e përgjithshme 1 Kb), Rrëshqitës adaptiv Yakiy openє, elementë vikoristyuchi në mes të enës. ResponsiveSLides.js bazohet në një numër të madh të shfletuesve, duke përfshirë të gjitha versionet e IE nga IE6 dhe më shumë:

  • Rritja e përshtatshmërisë;
  • Madhësia 1 KB;
  • CSS3 mund të ekzekutohet përmes JavaScript;
  • Paraqitje e thjeshtë nga lista e listave të shënuara;
  • Aftësia për të rregulluar efektet e kalimit dhe parëndësinë në shikimin në një rrëshqitje;
  • Mundësia e hapjes së diapozitivës decilkoh;
  • Lëvizje automatike dhe manuale.

Demo | Zavantazhiti

Kamera - një rrëshqitës jQuery pa jQuery

Kamera - shtojcë me efekte kalimi pa probleme, paraqitje adaptive. E thjeshtë në nalashtuvanni, përshtatuni me anekset celular:

  • Rritje e dizajnit të përgjegjshëm;
  • nënshkrimet;
  • Mundësia e videos shtesë;
  • 33 ngjyra dimërore të ikonave.

Demo | Kaçati

SlidesJS, një shtesë e përgjegjshme jQuery

SlidesJS është një shtojcë e përgjegjshme për JQuery (1.7.1 dhe më shumë) me shtesa të prekshme dhe kalime CSS3. Eksperimentoni me të, provoni disa prapanica të gatshme, për t’ju ​​ndihmuar të filloni, për të shtuar SlidesJS në projektin tuaj:

  • Dizajn të përgjegjshëm;
  • CSS3 - shkoni te;
  • Pidtrimka e lidhjeve shqisore;
  • E thjeshtë në nalashtuvanni.

demo | shantazh

BX Jquery Slider

Rrëshqitës jQuery përgjegjës pa gjoks:

  • Rritja e përshtatshmërisë - përshtatja me pristіy -si;
  • Ndryshimi horizontal, vertikal i rrëshqitjeve;
  • Rrëshqitjet mund të zbulojnë imazhe, video ose përmbajtje HTML;
  • Shtojca të zgjeruara të sensorit;
  • Kalimet Vikoristannya CSS për animacionet e rrëshqitjeve ( harduer);
  • API e wikis -ve të mëdhenj dhe metodave të përgjithshme publike;
  • Madhësia e vogël për skedarin;
  • E thjeshtë në zbatim.

Demo | Zavantazhiti

FlexSlider 2

Rrëshqitës i përgjegjshëm me furçë. Version i ri Plumbi plotësohet me ndihmën e rritjes së fleksibilitetit të robotëve, kompaktësisë.

demo | shantazh

Galleria - një galeri e përgjegjshme fotografish e bazuar në JavaScript

Galleria shfaqet në miliona faqe për krijimin e galerisë. Një numër raportesh pozitive për robotët janë jashtë shkallës:

  • Unë do të rritem pa koshtovny;
  • Modaliteti peer-to-peer për ekran;
  • 100% i përgjegjshëm;
  • Nuk kërkohet për informacion në lidhje me programin;
  • Pidtrimka iPhone, iPad dhe bashkëngjitje të tjera me prekje;
  • Flickr, Vimeo, YouTube dhe shumë gjëra;
  • Disa nga ato.

demo | shantazh

Boronica - një rrëshqitës i thjeshtë i imazhit jQuery

Unë ju paraqes një imazh rrëshqitës jQuery të shkruar posaçërisht për hartimin e uebit të përgjegjshëm. Boronica - Shtojca Eksperimentale e Rrëshqitësit të Imazhit me kodin dalës, Libri Yaky i drejtshkrimeve posaçërisht për robotët me modele adaptive.

Në nivelin e dhënë, një rrëshqitës CSS3 lehtësisht i dukshëm. Fito efektin vude vikoristovuvati duke u shuar me rrëshqitje. Dodatkovo mund të përshkruhet për imazhe të lëkurës. Për organizimin e informacionit, do të ketë një listë të parregullsive. Rrëshqitja do të ndryshojë automatikisht për animacion shtesë CSS3.

Paraqitja HTML

Paraqitja HTML është aq e thjeshtë sa duket. Në prapanicë ide rrëshqitje chotiri. Lëkura prej tyre ruhet nga imazhi (si një sfond) dhe unë do të përshkruaj tekstin në elementin div. Evenshtë edhe më e lehtë të futësh rrëshqitje shtesë.

  • Përshkrimi # 1
  • Përshkrimi # 2
  • Përshkrimi # 3
  • Përshkrimi # 4

CSS

Për rrëshqitësin, përdorni animacionet CSS3 anim_slides dhe anim_titles. Persha zastosovuєatsya për rrëshqitje okremikh, mik - për tekstin përshkruani. Për përshkrimin, unë gjithashtu do të ndryshoj pozicionin dhe vizionin.

/ * Rrëshqitës * /. Rrëshqitje (lartësia: 300px; diferenca: 50px automatike; tejmbushja: e fshehur; pozicioni: relativ; gjerësia: 900px;). Rrëshqitjet ul (stili i listës: asnjë; pozicioni: relativ;) / * Korniza e animacionit # anim_slides * / @ -webkit -keyframes anim_slides (0% (opacity: 0;) 6% (opacity: 1;) 24% (opacity: 1;) 30% (opacity: 0;) 100% (opacity: 0;) ) rrëshqitjet ul li (errësirë: 0; pozicioni: absolut; krye: 0; / * animacion css3 * / -webkit-animation-name: anim_slides; -webkit-animacion-kohëzgjatja: 24.0s; -webkit-animacion-koha-funksion: lineare; -webkit-animacion-iteration-count: pafund; -webkit-animacion-drejtim: normal; -webkit-animacion-vonesë: 0; -webkit-animation-play-state: running; -webkit-animacion-mbushje-mode : përpara; -moz-animacion-emri: anim_slides; -moz-animation-kohëzgjatja: 24.0s; -moz-animation-timing-funksion: linear; -moz-animacion-ite racion-count: pafund; -moz-animacion- drejtim: normal; -moz-animacion-vonesë: 0; -moz-animacion-lojë-gjendje: vrapim; -moz-animacion-mbushje-mënyra: përpara;) / * Css3 shkurtime * /. rrëshqitje ul li: nth-child (2). . rrëshqitje ul li: nth-child (3) div (-wekkit-animacion-vonesë: 12.0s; -moz-animacion-vonesë: 12.0s;). rrëshqitje ul li: nth-child (4),. slides ul li: nth-child (4) div (-webkit-animacion-vonesë: 18.0s; -moz-animacion-vonesë: 18.0s;). rrëshqitje ul li img (shfaqja: blloku;) / * Korniza e animacionit #anim_titrat * / @ -webkit -keyframes anim_titles (0% (majtas: 100%; opaciteti: 0;) 5% (majtas: 10%; perde: 1;) 20% ( majtas: 10%; errësirë: 1;) 25% (majtas: 100%; errësirë: 0;) 100% (majtas: 100%; errësirë: 0;)) @ -moz -keyframes anim_titles (0% (majtas: 100 %; errësirë: 0;) 5% (majtas: 10%; errësirë: 1;) 20% (majtas: 10%; errësirë: 1;) 25% (majtas: 100%; errësirë: 0;) 100% (majtas : 100%; errësirë: 0;)). Rrëshqitjet ul li div (sfondi-ngjyra: #000000; rrezja e kufirit: 10px 10px 10px 10px; kutia-hije: 0 0 5px #FFFFFF futur; ngjyra: #FFF FFF; font -masa: 26px; majtas: 10%; diferenca: 0 automatike; mbushje: 20px; pozicioni: absolut; lart: 50%; gjerësia: 200px; / * Animacioni css3 * / -webkit-animation-name: anim_titles; -webkit- animacion-kohëzgjatja: 24.0s; -webkit-animation-timing-funksion: linear; -webkit-animacion-iteration-count: pafund; -web kit-animacion-drejtim: normal; -webkit-animacion-vonesë: 0; -webkit-animacion-lojë-gjendje: vrapim; -webkit-animacion-mbushur-mode: përpara; -moz-animation-name: anim_titles; -moz-animacion-kohëzgjatja: 24. 0s; -moz-animation-timing-funksion: linear; -moz-animacion-iteration-count: pafund; -moz-animacion-drejtim: normal; -moz-animacion-vonesë: 0; -moz-animation-play-state: vrapim; -moz-animacion-mbushur-mode: përpara; )