În prezent, un slider carusel este o funcționalitate care este pur și simplu necesară pe un site web de afaceri, un site web de portofoliu sau orice altă resursă. Alături de glisoarele pentru imagini pe ecran complet, glisoarele orizontale carusel se potrivesc bine în orice design web.

Uneori, glisorul trebuie să ocupe o treime din pagina site-ului. Aici glisorul carusel este folosit cu efecte de tranziție și cu machete receptive. Site-urile de comerț electronic folosesc un glisor carusel pentru a prezenta mai multe fotografii în postări sau pagini separate. Codul glisor este liber de utilizat și modificat în funcție de nevoile dvs.

Folosind jQuery împreună cu HTML5 și CSS3, vă puteți face paginile mai interesante cu efecte unice și puteți atrage atenția vizitatorilor asupra unei anumite zone a site-ului.

Slick - plugin-ul glisor carusel modern

Slick este un plugin jQuery gratuit ai cărui dezvoltatori susțin că soluția lor va satisface toate cerințele dvs. de glisare. Glisor receptiv - caruselul poate funcționa în modul „tigla” pentru dispozitivele mobile și în modul „glisare și plasare” pentru versiunea desktop.

Conține un efect de tranziție de fade, o caracteristică interesantă „mod în centru”, încărcare leneșă a imaginilor cu defilare automată. Funcționalitatea actualizată include adăugarea de diapozitive și a unui filtru de diapozitive. Totul pentru ca dvs. să personalizați pluginul în funcție de cerințele dvs.

Modul demonstrativ | Descarca

Owl Carousel 2.0 - plugin jQuery pentru dispozitive tactile

Acest plugin are un set mare de caracteristici, potrivite atât pentru începători, cât și pentru dezvoltatori experimentați. Aceasta este o versiune actualizată a glisorului carusel. Predecesorul său avea același nume.

Glisorul are câteva plugin-uri încorporate pentru a îmbunătăți funcționalitatea generală. Animația, redarea video, redarea automată cu glisare, încărcarea leneșă, reglarea automată a înălțimii sunt principalele caracteristici ale Owl Carousel 2.0.

Suportul de glisare și plasare este inclus pentru o utilizare mai convenabilă a pluginului pe dispozitivele mobile.
Pluginul este perfect pentru afișarea imaginilor mari chiar și pe ecrane mici ale dispozitivelor mobile.

Exemple | Descarca

Pluginul jQuery Silver Track

Un plugin jquery destul de mic, dar bogat, care vă permite să plasați un glisor carusel pe pagină, care are un nucleu mic și nu consumă multe resurse ale site-ului. Pluginul poate fi folosit pentru a afișa glisoare verticale și orizontale, cu animație și pentru a crea seturi de imagini din galerie.

Exemple | Descarca

AnoSlide - Slider jQuery ultra compact, receptiv

Sliderul jQuery ultra compact este un carusel care are mult mai multe funcționalități decât un slider obișnuit. Acestea includ o previzualizare a unei singure imagini, un afișaj carusel cu mai multe imagini și un glisor bazat pe titlu.

Exemple | Descarca

Owl Carusel - slider jquery - carusel

Owl Carusel este un glisor de glisare și plasare cu atingere care poate fi încorporat cu ușurință în codul HTML. Pluginul este unul dintre cele mai bune glisoare care vă permit să creați carusele frumoase fără nici un marcaj special pregătit.

Exemple | Descarca

Galerie 3D - carusel

Utilizează tranziții 3D bazate pe stiluri CSS și ceva cod Javascript.

Exemple | Descarca

Carusel 3D folosind TweenMax.js și jQuery

Carusel 3D superb. Se pare că este încă o versiune beta, pentru că tocmai acum am găsit câteva probleme cu ea. Dacă sunteți interesat să testați și să vă creați propriile glisoare, acest carusel vă va fi de mare ajutor.

Exemple | Descarca

Carusel folosind bootstrap

Glisor carusel receptiv folosind tehnologia bootstrap, potrivit pentru noul dvs. site web.

Exemple | Descarca

Glisor bazat pe bootstrap - Carusel Moving Box

Cele mai căutate pe site-urile de portofoliu și de afaceri. Un tip similar de glisor - carusel se găsește adesea pe site-uri de orice tip.

Exemple | Descarca

Tiny Circleslider

Acest glisor de dimensiuni mici este gata să funcționeze pe dispozitive cu orice rezoluție de ecran. Glisorul poate funcționa atât în ​​modul circular, cât și în modul carusel. Cercul minuscul este prezentat ca o alternativă la alte glisoare de acest tip. Există suport încorporat pentru sistemele de operare IOS și Android.

În modul circular, glisorul pare destul de interesant. Suportul pentru metoda drag and drop și sistemul automat de defilare a diapozitivelor sunt bine implementate.

Exemple | Descarca

Slider de conținut Thumbelina

Glisorul puternic, adaptiv, de tip carusel este perfect pentru un site modern. Funcționează corect pe orice dispozitiv. Are moduri orizontale și verticale. Dimensiunea sa este redusă la doar 1 KB. Plug-in-ul ultra compact are tranziții fine excelente.

Exemple | Descarca

wow slider carusel

Conține peste 50 de efecte care vă pot ajuta să creați un glisor original pentru site-ul dvs.

Exemple | Descarca

Slider de conținut jQuery receptiv bxSlider

Redimensionați fereastra browserului pentru a vedea cum se adaptează glisorul. Bxslider vine cu peste 50 de opțiuni de personalizare și își prezintă caracteristicile cu diverse efecte de tranziție.

Exemple | Descarca

jCarusel

jCarousel este un plugin jQuery care vă va ajuta să vă organizați vizualizările imaginii. Veți putea crea cu ușurință carusele de imagini personalizate din cadrul prezentat în exemplu. Glisorul este receptiv și optimizat pentru platformele mobile.

Exemple | Descarca

ScrollBox - Plugin jQuery

Scrollbox este un plugin compact pentru crearea unui glisor - carusel sau linie de rulare text. Caracteristicile cheie includ un efect de defilare verticală și orizontală cu o pauză la trecerea mouse-ului.

Exemple | Descarca

dbpasCarusel

Un glisor simplu carusel. Dacă aveți nevoie de un plugin rapid, acesta este 100% potrivit. Vine cu doar caracteristicile de bază necesare pentru ca glisorul să funcționeze.

Exemple | Descarca

Flexisel: Plugin JQuery Carousel Slider receptiv

Creatorii Flexisel s-au inspirat din pluginul jCarousel de școală veche, făcând o copie a acestuia, axată pe funcționarea corectă a glisorului pe dispozitivele mobile și tablete.

Aspectul receptiv al Flexisel, atunci când rulează pe dispozitive mobile, diferă de aspectul orientat spre dimensiunea ferestrei browserului. Flexisel este perfect adaptat pentru a lucra pe ecrane, atât de joasă, cât și de înaltă rezoluție.

Exemple | Descarca

Elastislide - Glisor carusel receptiv

Elastislide se adaptează perfect la dimensiunea ecranului dispozitivului. Puteți seta numărul minim de imagini de afișat la o anumită rezoluție. Funcționează bine ca un glisor carusel cu galerii de imagini folosind un înveliș fix împreună cu un efect de defilare verticală.

Exemplu | Descarca

Flex Slider 2

Slider gratuit de la Woothemes. Este pe bună dreptate considerat unul dintre cele mai bune glisante receptive. Pluginul conține mai multe șabloane și va fi util atât pentru utilizatorii începători, cât și pentru experți.

Exemplu | Descarca

Carusel uimitor

Amazing Carousel este un slider de imagine jQuery receptiv. Suportă multe sisteme de gestionare a conținutului, cum ar fi WordPress, Drupal și Joomla. De asemenea, acceptă versiunile Android și IOS și desktop ale sistemelor de operare fără probleme de compatibilitate. Șabloanele de carusel uimitoare încorporate vă permit să utilizați glisorul în modurile vertical, orizontal și circular.

Exemple | Descarca

În acest tutorial, vom face un slider CSS3 grozav. Va folosi efectul de estompare între diapozitive. În plus, puteți folosi o descriere pentru fiecare imagine. O listă neordonată va fi folosită pentru a organiza informațiile. Slide-urile se vor comuta automat folosind animații CSS3.

Marcaj HTML

Marcajul HTML este foarte simplu. Exemplul are patru diapozitive. Fiecare constă dintr-o imagine (ca fundal) și text de descriere într-un element div. Introducerea diapozitivelor suplimentare este foarte ușoară.

css

Glisorul folosește animații CSS3 anim_slides și anim_titles . Primul se aplică diapozitivelor individuale, al doilea - textului de descriere. Poziția și transparența se schimbă și pentru descriere.

/* Slider */ .slides (înălțime:300px; margine:50px automat; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Cadre de animație # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( opacitate:0; ) 6% ( opacitate:1; ) 24% ( opacitate:1; ) 30% ( opacitate:0; ) 100% ( opacitate:0; ) ) @-moz-keyframes anim_slides ( 0% ( opacitate:0; ) 6% ( opacitate:1; ) 24% ( opacitate:1; ) 30% ( opacitate:0; ) 100% ( opacitate:0; ) ) . slides ul li ( opacitate: 0; poziție: absolut; top: 0; /* animație css3 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: liniar; -număr-iterație-animație-webkit: infinit; -direcție-animație-webkit: normal; -întârziere-animație-webkit: 0; -stare-play-animație-webkit: rulează; -mod-de-umplere-webkit-animație : înainte; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-ite raport-număr: infinit; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: alergare; -moz-animation-fill-mode: înainte; ) /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; ) .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( display:block; ) /* #anim_titles cadre de animație */ @-webkit-keyframes anim_titles ( 0% ( stânga:100%; opacitate:0; ) 5% ( stânga:10%; opacitate:1; ) 20% ( stânga:10%; opacitate:1; ) 25% ( stânga:100%; opacitate:0; ) 100% ( stânga:100%; opacitate:0; ) ) @-moz-keyframes anim_titles ( 0% ( stânga:100) %; opacitate: 0; ) 5% ( stânga: 10%; opacitate: 1; ) 20% ( stânga: 10%; opacitate: 1; ) 25% ( stânga: 100%; opacitate: 0; ) 100% ( stânga: :100%; opacitate:0; ) ) .slides ul li div (culoare de fundal:#000000; rază-chenar:10px 10px 10px 10px; umbră de casetă:0 0 5px #FFFFFF inset; culoare:#FFF FFF; dimensiunea fontului: 26px; stânga: 10%; margine:0 auto; umplutură: 20px; poziție: absolut; sus:50%; lățime: 200px; /* Animație css3 */ -webkit-animation-name: anim_titles; -webkit-animatie-durata: 24.0s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinit; -webkit-animatie-directie: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: rulare; -webkit-animation-fill-mode: înainte; -moz-animation-name: anim_titles; -moz-animation-durata: 24. 0s; -functie-moz-animation-timing: liniar; -moz-animation-iteration-count: infinit; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: alergare; -moz-animation-fill-mode: înainte; )

Galerii de imagini sub formă de glisor. Când am început să pregătesc materialul pentru această colecție, m-am gândit că vor exista doar două infinitate de materiale de înaltă calitate, deoarece subiectul galerii de imagini vechi ca lumea și foarte căutat. Nu a existat nicio limită pentru surpriza mea când, cu fiecare demo nou deschis, era de încredere să găsim ceva decent care se topea în fața ochilor noștri. În acest sens, selecția s-a dovedit a fi nu mare, ci, după părerea mea, cu exemplare destul de interesante. Printre ei sunt amândoi adaptivi galerii de imagini asa de galerii.
Apropo, în subiectul anterior, am făcut o selecție de pluginuri de galerie pentru WordPress, așa că dacă ai un site WordPress cred că va fi extrem de interesant pentru tine.

1 Galeria Unite

liber, galerie foto și video adaptativă bazat pe biblioteca jQuery. În timpul dezvoltării, s-a pus accentul pe ușurința de utilizare și personalizare. Vine cu un număr destul de mare de teme de înaltă calitate și, cel mai important, este posibil să vă scrieți propriile teme.

2. Galerie de imagini receptivă cu carusel de miniaturi

Galerie de imagini responsive cu funcția de a opri caruselul de previzualizare. Se adaptează la dimensiunea ecranului dvs., există un preloader pentru încărcarea imaginilor.

4. Galerie de imagini de pagină completă cu jQuery

Încă unul galerie de imagini pe ecran complet. Caracteristica și „evidențierea” sa este mișcarea imaginii mărite pe tot ecranul în funcție de poziția mouse-ului.
Bara de miniaturi din partea de jos a ecranului derulează automat când utilizatorul mișcă mouse-ul.

5. Slider galerie cu jQuery

Ideal pentru împărțirea galeriilor în albume. Când este selectat un album, vor fi afișate miniaturile. glisor de imagine.

6. Galleria

Este bine proiectat galerie de imagini receptivă, capabil să afișeze galerii foto și video din Flickr, Picasa, YouTube etc. Suport pentru dispozitive mobile și posibilitatea de a lucra în modul ecran complet. Este posibilă afișarea semnăturilor. Sunt plătite

Acest articol descrie cum să implementați și să creați un glisor de imagine sau text cu defilare automată. Funcționalitatea glisorului vă permite să setați intervalul de comutare între diapozitive, viteza, efectul modificării, precum și selectarea unui anumit slide din listă. În acest exemplu, am folosit metoda clasică de schimbare a imaginilor - apariția și dispariția diapozitivelor.

timeList- viteza de comutare al glisării

vedere de timp- arată timpul

radiobut- butoane sub slide pentru navigare rapidă (butoane radio). Mod implicit Adevărat poate lua o valoare fals.

Acum să începem! Creați și deschideți un fișier index.htm

Atenţie! În acest exemplu, textul este folosit pentru a lucra diapozitivul, dacă doriți să utilizați o imagine, atunci puneți fiecare dintre imaginile dvs. într-o etichetă

.

În codul prezentat, după cum putem vedea, nu este nimic complicat, slider-wrap definește poziția generală a glisorului și o aliniază la mijlocul ecranului. Parametru glisor poziționează și stabilește înălțimea toboganului nostru cu proprietatea înălţime. Dacă veți folosi glisorul de imagine, atunci specificați înălțimea imaginilor în această proprietate, dacă înălțimea imaginilor este diferită, atunci specificați valoarea maximă.

Pentru cea mai bună vizualizare a glisorului și a atractivității, utilizați aceeași rezoluție a imaginii.

Acum trebuie să ne stilăm glisorul. Săgețile înainte/înapoi pentru comutarea diapozitivelor, precum și butoanele radio de sub glisor, sunt folosite ca imagini și sunt atașate la fișier. Creați și deschideți un fișier stil.cssși scrieți marcajul de care avem nevoie acolo:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( înălțime: 100%; ) body ( culoare: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap ( max. -width:650px; margin: 100px auto; ) #slider (poziție:relativ; înălțime: 200px; overflow: ascuns; chenar:#fafafa solid 10px; ) .slide ( lățime:100%; înălțime: 100%; poziție: absolut ; sus: 0; stânga: 0; text-align: center; padding-top: 40px; ) .Radio-But ( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( afișare : bloc în linie; lățime: 16 px; înălțime: 16 px; fundal: url("radioBg.png") centru jos fără repetare; margine: 2px; overflow: ascuns; text-indent: -99999px; ) .Radio-But . ctrl-select:hover (cursor: pointer; fundal-poziție: centru centru; ) .Radio-But .ctrl-select.active( poziția fundal: centru sus; ) #prewBut, #nextBut( afișare: bloc; lățime: 40px ; înălțime: 100%; poziție: absolut; sus: 0; overflow: ascuns; text-indent: -99999px; fundal: url("arrowBg.png") stânga centru fără rep. mânca; opacitate: 0,5 indicele z: 3; contur: nici unul !important; ) #prewBut ( stânga: 10px; ) #nextBut ( dreapta: 10px; fundal: url("arrowBg.png") dreapta centru no-repeat; ) #prewBut:hover, #nextBut:hover ( opacitate: 1; )

Dacă săgețile înainte/înapoi interferează cu vizibilitatea cursorului dvs., acestea pot fi făcute invizibile și vor apărea numai când treceți cu mouse-ul peste ele. În parametri prewDarși următorDar, setați proprietatea opacitate valoarea 0.

Creați și deschideți js, care va conține codul glisor. Nu uitați să includeți cadrul jQuery, precum și biblioteca jquery.ui - avem nevoie de biblioteca specificată pentru a seta elementul de dispariție și aspectul slide-ului. Puteți înlocui efectul specificat cu proprietatea fadeInși fadeOut.

$(document).ready(function () ( var timeList = 300; var TimeView = 5000; var RadioBut = true; $(".slide").hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(sgeata)( clearTimeout(slideTime); function slideDirectionHide(slideFloatNum, directTo)( $(".slide").eq( slideFloatNum).fadeOut(timeList); ) funcția slideDirectionShow(slideFloatNum, directTo, pauză)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( dacă (pauză == adevărat) ( ​​​rotator( ); ) )); ) var old_slideNum = slideNum; if(săgeată == „next”)( slideDirectionHide(slideNum, „stânga”); if(slideNum == (slideCount-1))(slideNum=0;) else( slideNum++) slideDirectionShow(slideNum, „dreapta”, adevărat); ) else if(săgeată == „prew”) ( slideDirectionHide(slideNum, „dreapta”); if(slideNum == 0)(slideNum=slideCount-1; ) else (slideNum-=1) slideDirectionShow(slideNum, „stânga”, adevărat); )else( if(săgeată !== old_slideNum) ( if(săgeată > old_slideNum) ( slideDirectionHide( slideNum, „stânga”); slideNum = săgeată; slideDirectionShow(slideNum, „dreapta”, adevărat); )altfel dacă (săgeată< old_slideNum) { slideDirectionHide(slideNum, "right"); slideNum = arrow; slideDirectionShow(slideNum, "left", true); } } } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum).addClass("active"); } if(RadioBut){ var linkArrow = $("<>").prependTo("#slider"); $("#nextBut").click(function()( animSlide("next"); return false; )) $("#prewBut").click(function() ( animSlide("prew"); return false; )) ) var addSpan =""; $(".slide").each(function(index) ( addSpan += " " + index + ""; }); $("

").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("activ"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide(") următorul")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); pauză = adevărat;), function()(pauză = fals; rotator(); ) ); var clicking = false; var prevX; $(".slide").mousedown(function(e)( clicking = true; prevX = e.clientX; )); $(".slide").mouseup(function( ) ( clic = fals; )); $(document).mouseup(funcție()( clic = fals; )); $(".slide").mousemove(funcție(e)( dacă (clic == adevărat) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) clic = fals; ) )); $(".slide").hover().css("cursor", "pointer"); rotator(); ));

Funcţie animSlide ia trei tipuri de valori: Următorul, prew, și o valoare numerică. Parametru Următorul comută diapozitivul următor, prew anterior, iar valoarea numerică este diapozitivul specific selectat prin butonul radio de sub slide. Funcții slideDirectionHideși slideDirectionShow aproape similar și identic, primul este responsabil pentru dispariția toboganului și direcția de mișcare a toboganului de ieșire, al doilea pentru aspectul toboganului, direcția de mișcare a acestuia atunci când apare și, de asemenea, pentru timpul de afișare specificat interval.

Când treceți mouse-ul peste glisor, afișajul se întrerupe.

Atât, dacă ceva nu este clar sau ai întrebări, scrie și întreabă.

Salutare dragi cititori de blog. Astăzi vă prezint un util o selecție de glisoare jQuery gratuite cu exemple. Dacă tot decideți să puneți un glisor de imagine pe resursa dvs., această selecție vă va fi foarte utilă și, credeți-mă, aveți o mulțime de alegere. Mai mult, toate glisoarele cu exemple și fiecare dintre ele le puteți încerca în acțiune. În general, nu voi distrage atenția, alege :-)

Glisor simplu pentru imagine jQuery

Cel mai comun și nu cel mai mare glisor de miniaturi de pe site-ul dvs.

Slider pentru miniaturi jQuery

Un glisor foarte simplu și interesant cu miniaturi, care este potrivit pentru aproape orice design.

Slider frumos pentru site-ul web

Glisor de imagine mare și foarte frumos, cu derulare interesantă a textului.

Slider jQuery de bază

Cel mai comun și simplu glisor pentru resursa dvs

Glisor mare cu descriere

Glisor spectaculos pe lângă care este nerealist să treci.

Slider imagine jQuery și descriere

Ridică-te și glisor de text elegant, cu imagini și efect de defilare plăcut.

Derularea imaginilor cu indicii

Imagini interesante care defilează continuu și fără probleme. În mod implicit, există imagini cu diferite fructe pe care le puteți schimba în propriile dvs.

Slider săgeată mare jQuery

Un glisor interesant cu săgeți roz mari care își schimbă dimensiunea prin mărirea imaginii.