Descărcați un slider frumos. Slider Pro - glisor adaptiv cu miniaturi. Plugin jQuery „Slider²”

21.06.2020 Siguranță

Dacă trebuie să adăugați un slider de imagine jQuery de înaltă calitate pe site-ul dvs., atunci în acest articol veți găsi o descriere a pluginurilor necesare. Chiar dacă JQuery a făcut lucrul cu JavaScript mult mai ușor, avem totuși nevoie de pluginuri pentru a accelera procesul de proiectare web.

Putem face modificări unora dintre aceste plugin-uri și putem crea noi slidere care sunt mult mai potrivite pentru scopurile site-ului nostru.

Pentru alte glisoare, pur și simplu adăugați titluri, imagini și selectați efectele de tranziție a diapozitivelor care vin cu glisorul. Toate aceste plugin-uri sunt însoțite de documentație detaliată, așa că adăugarea de noi efecte sau funcții la ele nu va fi dificilă. Puteți chiar să schimbați declanșatoarele bazate pe evenimente dacă sunteți un programator JQuery experimentat.

Ultimele tendințe precum design adaptiv, sunt foarte importante pentru proiectele web, indiferent dacă implementați un plugin sau un script. Toate aceste elemente fac ca fiecare dintre aceste pluginuri să fie foarte flexibil. Tot ce a ieșit în 2014 este inclus în această listă.

Slidere de imagine JQuery Jssor Responsive Slider

Recent, am dat peste acest slider jQuery puternic și am putut să văd direct că își face treaba foarte bine. Conține posibilități nelimitate care pot fi extinse prin codul open source al glisorului:

  • Design adaptiv;
  • Peste 15 opțiuni de personalizare;
  • Peste 15 efecte de schimbare a imaginii;
  • Galerie de imagini, carusel, suport pentru dimensiunea ecranului complet;
  • Rotator vertical de banner, listă de diapozitive;
  • Suport video.

Demo | Descarca

PgwSlider - glisor adaptiv bazat pe JQuery/Zepto

Singura sarcină a acestui plugin este să arate diapozitive de imagini. Este foarte compact, deoarece fișierele JQuery au o dimensiune de doar 2,5 KB, ceea ce îi permite să se încarce foarte repede:

  • Aspect adaptiv;
  • optimizare SEO;
  • Suport pentru diferite browsere;
  • Tranziții simple de imagine;
  • Dimensiunea arhivei este de numai 2,5 KB.

Demo | Descarca

Slider Jquery Vertical News

Un glisor JQuery flexibil și util, conceput pentru resurse de știri, cu o listă de publicații în partea stângă și o imagine afișată în dreapta:

  • Design adaptiv;
  • Coloana verticală pentru comutarea știrilor;
  • Anteturi extinse.

Demo | Descarca

Wallop Slider

Acest glisor nu conține jQuery, dar aș dori să-l prezint deoarece este foarte compact și poate reduce semnificativ timpul de încărcare a paginii. Anunță-mă dacă îți place:

  • Aspect adaptiv;
  • Design simplu;
  • Diverse opțiuni de schimbare a diapozitivelor;
  • Cod JavaScript minim;
  • Dimensiunea este de doar 3KB.

Demo | Descarca

Galerie Polaroid în stil plat

Galerie în stilul documentelor împrăștiate pe o masă cu aspect flexibil și design frumos ar trebui să fie de interes pentru mulți dintre voi. Mai potrivite pentru tablete și ecrane mari:

  • Glisor adaptiv;
  • Design plat;
  • Schimbare aleatorie a diapozitivei;
  • Acces complet la codul sursă.

Demo | Descarca

A-Slider

Demo | Descarca

HiSlider – HTML5, jQuery și Slider WordPress imagini

HiSlider a introdus un nou plugin gratuit jQuery slider cu care puteți crea o varietate de galerii de imagini cu tranziții fantastice:

  • Glisor adaptiv;
  • Nu necesită cunoștințe de programare;
  • Mai multe șabloane și skin-uri uimitoare;
  • Efecte frumoase de tranziție;
  • Suport pentru diferite platforme;
  • Compatibil cu WordPress, Joomla, Drupal;
  • Abilitatea de a afișa conținut tipuri diferite: imagini, video YouTubeși videoclipuri Vimeo;
  • Configurare flexibilă;
  • Caracteristici suplimentare utile;
  • Cantitate nelimitată de conținut afișat.

Demo |Descărcare

Wow Slider

WOW Slider este un slider de imagine jQuery receptiv, cu efecte vizuale uimitoare (domino, rotire, estompare, răsturnare și flash, fly out, jaluzele) și șabloane profesionale.

WOW Slider vine cu un asistent de instalare care vă permite să creați slidere fantastice în câteva secunde fără a fi nevoie să înțelegeți codul sau să editați imagini. Versiunile pluginului pentru Joomla și WordPress sunt, de asemenea, disponibile pentru descărcare:

  • Pe deplin receptiv;
  • Acceptă toate browserele și toate tipurile de dispozitive;
  • Suport pentru dispozitive tactile;
  • Instalare ușoară pe WordPress;
  • Flexibilitate în configurație;
  • optimizat pentru SEO.

Demo |Descărcare

Nivo Slider – plugin jQuery gratuit

Nivo Slider este cunoscut în întreaga lume drept cel mai frumos și mai ușor de utilizat glisor de imagine. Pluginul Nivo Slider este gratuit și eliberat sub licență MIT:

  • Necesită JQuery 1.7 și mai sus;
  • Efecte frumoase de tranziție;
  • Simplu și flexibil de configurat;
  • Compact și adaptiv;
  • Sursa deschisa;
  • Puternic și simplu;
  • Mai multe șabloane diferite;
  • Decuparea automată a imaginii.

Demo |Descărcare

Slider jQuery simplu cu documentație tehnică

Ideea a fost inspirată de glisoarele Apple, în care mai multe elemente mici pot zbura cu diferite efecte de animație. Dezvoltatorii au încercat să implementeze acest concept ținând cont Cerințe minime pentru a crea un design simplu de magazin online în care elementele „zburătoare” reprezintă diferite categorii:

  • Aspect adaptiv;
  • Design minimalist;
  • Diverse efecte de abandon și de schimbare a diapozitivelor.

Demo |Descărcare

Slider imagine jQuery la dimensiune completă

Un glisor foarte simplu care ocupă 100% din lățimea paginii și se adaptează la dimensiunile ecranului dispozitivelor mobile. Funcționează cu tranziții CSS, iar imaginile sunt „stivuite” împreună cu ancore. Ancora poate fi înlocuită sau îndepărtată dacă nu doriți să atașați un link la imagine.

Când este instalat, glisorul se extinde la 100% din lățimea ecranului. De asemenea, poate reduce automat dimensiunea imaginilor de diapozitive:

  • Slider JQuery adaptiv;
  • Mărime completă;
  • Design minimalist.

Demo |Descărcare

Slider pentru conținut elastic + tutorial

Glisorul de conținut elastic ajustează automat lățimea și înălțimea în funcție de dimensiunile elementului părinte. Acesta este un glisor jQuery simplu. Este alcătuit dintr-o zonă de diapozitive în partea de sus și o bară de file de navigare în partea de jos. Glisorul își reglează lățimea și înălțimea în funcție de dimensiunile containerului părinte.

Când sunt vizualizate pe ecrane cu diagonale mici, filele de navigare se transformă în pictograme mici:

  • Design adaptiv;
  • Derulare cu clic de mouse.

Demo |Descărcare

Slider stivă 3D gratuit

Un glisor experimental care derulează imaginile în 3D. Cele două teancuri seamănă cu teancuri de hârtie, din care, atunci când sunt derulate, imaginile sunt afișate în centrul glisorului:

  • Design adaptiv;
  • Flip - tranziție;
  • efecte 3D.

Demo |Descărcare

Slider cu fantă pe ecran complet bazat pe tutorial JQuery și CSS3 +

Acest tutorial vă va arăta cum să creați un glisor cu o răsucire: ideea este să „tăiați” și să afișați diapozitivul curent pe măsură ce deschideți imaginea următoare sau anterioară. Folosind animația JQuery și CSS, putem crea efecte de tranziție unice:

  • Design adaptiv;
  • Tranziție împărțită;
  • Glisor pe ecran complet.

Demo |Descărcare

Unislider - un glisor jQuery foarte mic

Fără clopote și fluiere inutile, o dimensiune mai mică de 3 KB. Utilizați orice cod HTML pentru diapozitive, extindeți-l cu folosind CSS. Tot ceea ce are legătură cu Unslider este găzduit pe GitHub:

  • Suport pentru diverse browsere;
  • Suport pentru tastatură;
  • Ajustarea înălțimii;
  • Design adaptiv;
  • Suport de introducere prin atingere.

Demo | Descarca

Slide-uri cu răspuns minim

Un plugin simplu și compact (doar 1 KB în dimensiune) care creează un glisor receptiv folosind elemente din interiorul unui container. ResponsiveSLides.js funcționează cu o cantitate mare browsere, inclusiv toate versiunile de IE de la IE6 și ulterioare:

  • Pe deplin receptiv;
  • Dimensiune 1 KB;
  • Tranziții CSS3 cu capacitatea de a rula prin JavaScript;
  • Marcare simplă folosind liste cu marcatori;
  • Abilitatea de a personaliza efectele de tranziție și durata de vizualizare a unui diapozitiv;
  • Sprijină capacitatea de a crea mai multe prezentări de diapozitive;
  • Defilare automată și manuală.

Demo |Descărcare

Cameră - glisor jQuery gratuit

Camera este un plugin cu multe efecte de tranziție și un aspect receptiv. Ușor de configurat, acceptat de dispozitivele mobile:

  • Design complet receptiv;
  • Semnături;
  • Posibilitatea de a adăuga videoclipuri;
  • 33 de pictograme de culori diferite.

Demo |Descărcare

SlidesJS, plugin jQuery receptiv

SlidesJS este plugin adaptiv pentru JQuery (1.7.1 și o versiune ulterioară) cu suport pentru dispozitive tactile și tranziții CSS3. Experimentați cu el, încercați câteva exemple gata făcute care vă vor ajuta să înțelegeți cum să adăugați SlidesJS la proiectul dvs.:

  • Design adaptiv;
  • tranziții CSS3;
  • Suport pentru dispozitive tactile;
  • Ușor de configurat.

Demo | Descarca

Glisor BX Jquery

Acesta este un slider jQuery responsiv gratuit:

  • Complet responsive - se adaptează oricărui dispozitiv;
  • Schimbare orizontală, verticală;
  • Slide-urile pot conține imagini, videoclipuri sau conținut HTML;
  • Suport extins pentru dispozitive tactile;
  • Utilizarea tranzițiilor CSS pentru animația diapozitivelor (accelerare hardware);
  • Callback API și metode complet publice;
  • Fișier de dimensiune mică;
  • Ușor de implementat.

Demo |Descărcare

FlexSlider 2

Cel mai bun glisor receptiv. O noua versiune a fost modificat pentru a crește viteza și compactitatea.

Demo | Descarca

Galleria - galerie foto receptivă bazată pe JavaScript

Galleria este folosită pe milioane de site-uri pentru a crea galerii de imagini calitate superioară. Numărul de recenzii pozitive despre munca ei este pur și simplu în afara topurilor:

  • Complet gratuit;
  • Mod de vizualizare pe ecran complet;
  • 100% adaptiv;
  • Nu este necesară experiență în programare;
  • Suport pentru iPhone, iPad și alte dispozitive tactile;
  • Flickr, Vimeo, YouTube și multe altele;
  • Mai multe subiecte.

Demo | Descarca

Blueberry - un simplu glisor de imagine jQuery receptiv

Vă prezint un slider de imagine jQuery scris special pentru design web responsive. Blueberry este un plugin pentru slider de imagine open-source experimental cod sursa, care a fost scris special pentru a funcționa cu șabloane receptive.

Galeriile de imagini și glisoarele sunt unele dintre cele mai populare formate jQuery. Datorită acestora, puteți adăuga cantitatea necesară de conținut vizual site-ului dvs., economisind în același timp spațiu valoros.

Galeriile și glisoarele fac pagina mai puțin ocupată, dar vă permit totuși să adăugați toate imaginile de care aveți nevoie pentru a vă transmite mesajul. Acestea vor fi utile în special pentru magazinele online.

În articolul de astăzi, am colectat cele mai bune galerii de imagini și slidere jQuery pentru tine.

Pentru a le instala, trebuie doar să adăugați pluginurile selectate în secțiunea head Pagini HTMLîmpreună cu biblioteca jQuery și configurați-le conform documentației (doar câteva linii de cod).

Alege care dintre aceste elemente se potrivește perfect în proiectul tău.

1. Slider Bootstrap

Bootstrap Slider - gratuit, optimizat pentru dispozitive mobile Glisor de imagine cu derulare prin atingere și glisare. Va arăta uimitor pe orice ecran și în orice browser. Puteți încărca imagini, videoclipuri, text, miniaturi și butoane în glisoare.

2. Slider de previzualizare a produsului

Product Preview Slider întruchipează întregul potențial al jQuery și se potrivește perfect în orice interfață. De asemenea, veți fi mulțumit de calitatea și curățenia codului acestui plugin.

3. Galerie de imagini extensibilă

Galeria de imagini extensibilă este un plugin uimitor care se transformă într-o galerie pe ecran complet cu un singur clic. Poate fi folosit pentru secțiunea „Despre noi” sau pentru a vizualiza informații despre produs.

4. Fotorama

Fotorama – plugin responsive Galeriile jQuery, care funcționează atât pentru desktop, cât și pentru browsere mobile. Oferă o varietate de opțiuni de navigare: miniaturi, defilare, butoane înainte și înapoi, prezentări automate de diapozitive și marcatori.

5. Glisor imersiv

Immersive Slider vă permite să creați o experiență unică de vizionare a diapozitivelor, similară cu glisorul Google TV. Puteți modifica imaginea de fundal pentru a fi neclară pentru a păstra fotografia principală focalizată.

6. Cel puținjs

Leastjs este un plugin jQuery receptiv care vă va ajuta să creați o galerie uimitoare. Când treceți cursorul peste imagine, apare text; când faceți clic, fereastra se extinde la ecran complet.

7. Şablon de panouri glisante

Acest plugin este ideal pentru un portofoliu. Va crea blocuri de imagini dispuse orizontal (vertical pe mici ecrane) la care va fi legat conținutul selectat.

8. Șablon de portofoliu Squeezebox

Squeezebox Portfolio Template oferă efecte de mișcare pentru portofoliul dvs. Când treceți cu mouse-ul peste imaginea principală (sau bloc), apar elemente ancorate.

9. Amestecă imagini

Shuffle Images este un plugin responsiv uimitor care vă permite să creați o galerie cu imagini care se modifică la trecerea cursorului.

10. Plugin jQuery Lightbox gratuit

Gratuit jQuery Lightbox Pluginul vă va ajuta să afișați una sau mai multe imagini pe o singură pagină. De asemenea, pot fi mărite și readuse la dimensiunea inițială.

11. PgwSlider – Glisor receptiv pentru jQuery

PgwSlider este un glisor de imagine minimalist. Codul jQuery este ușor, așa că viteza de încărcare a acestui plugin vă va surprinde plăcut.

12. Galerie Polaroiduri împrăștiate

Scattered Polaroid Gallery este un slider uimitor realizat în design plat. Elementele sale se mișcă haotic la schimbarea imaginilor, ceea ce arată uimitor.

13. Filtru de conținut Bouncy

Bouncy Content Filter este o soluție ideală pentru portofolii. Acest plugin permite utilizatorilor să treacă rapid de la o categorie la alta.

14. Slider jQuery simplu

Simplu jQuery Slider se ridică la înălțimea numelui său. Acest plugin combină elemente JavaScript, HTML5 și CSS3. Demo-ul implicit permite doar încărcarea textului, dar dacă faceți câteva modificări, puteți adăuga și conținut vizual.

15. Glide JS

Glide JS este un slider jQuery simplu, rapid și receptiv. Este ușor de configurat, iar pluginul nu ocupă mult spațiu.

16. Glisor cu glisare pe ecran complet cu paralaxă

Acest uimitor glisor jQuery cu capacitatea de a încărca imagini și text este potrivit pentru orice site. Va încânta utilizatorii cu un ușor efect de paralaxă și aspect lent al textului.

1. Excelent prezentare jQuery

O prezentare mare, spectaculoasă, folosind tehnologii jQuery.

2. Pluginul jQuery „Scale Carusel”

Prezentare scalabilă folosind jQuery. Puteți seta dimensiunile de prezentare de diapozitive care vi se potrivesc cel mai bine.

3. Pluginul jQuery „slideJS”

Glisor de imagine cu descriere text.

4. Plugin „JSliderNews” 5. Slider CSS3 jQuery

Când treceți cu mouse-ul peste săgețile de navigare, apare o miniatură circulară a următorului diapozitiv.

6. Slider frumos jQuery „Ciclul de prezentare”.

Slider jQuery cu indicator de încărcare a imaginii. Este prevăzută schimbarea automată a diapozitivelor.

7. Pluginul jQuery „Parallax Slider”

Glisor cu efect volumetric de fundal. Punctul culminant al acestui glisor este mișcarea fundalului, care constă din mai multe straturi, fiecare derulând cu o viteză diferită. Rezultatul este o imitație a efectului volumetric. Arată foarte frumos, poți să vezi singur. Efectul este afișat mai ușor în browsere precum Opera, Google Chrome,IE.

8. Glisor jQuery proaspăt, ușor „bxSlider 3.0”

Pe pagina demo din secțiunea „exemple” puteți găsi link-uri către toate utilizările posibile ale acestui plugin.

9. Slider imagine jQuery, plugin „slideJS”.

Un slider jQuery elegant vă poate decora cu siguranță proiectul.

10. Plugin de prezentare jQuery „Easy Slides” v1.1

Un plugin jQuery ușor de utilizat pentru a crea prezentări de diapozitive.

11. Plugin jQuery Slidy

Plugin jQuery ușor în diferite versiuni. Este prevăzută schimbarea automată a diapozitivelor.

12. jQuery CSS galerie cu schimbare automată a diapozitivelor

Dacă vizitatorul nu face clic pe săgețile „Înainte” sau „Înapoi” într-un anumit timp, galeria va începe să deruleze automat.

13. Slider jQuery „Nivo Slider”

Plugin ușor profesional de înaltă calitate cu cod valid. Există multe efecte diferite de tranziție de diapozitive disponibile.

14. Slider jQuery „MobilySlider”

Glisor proaspăt. Slider jQuery cu diverse efecte de schimbare a imaginii.

15. Pluginul jQuery „Slider²”

Glisor ușor cu schimbător automat de diapozitive.

16. Slider javascript proaspăt

Glisor cu schimbare automată a imaginii.

Plugin pentru implementarea prezentărilor de diapozitive cu schimbare automată a diapozitivelor. Este posibil să controlați afișajul folosind miniaturile imaginilor.

Slider de imagine CSS jQuery folosind pluginul NivoSlider.

19. Slider jQuery „jShowOff”

Plugin pentru rotația conținutului. Trei variante de utilizare: fără navigare (cu schimbare automată în format slide show), cu navigare sub formă de butoane, cu navigare sub formă de miniaturi de imagine.

20. Plugin „Shutter Effect Portfolio”.

Plugin jQuery proaspăt pentru proiectarea portofoliului unui fotograf. Galeria are un efect interesant de schimbare a imaginilor. Fotografiile se succed cu un efect asemănător cu funcționarea unui obturator pentru obiectiv.

21. Glisor CSS javascript ușor „TinySlider 2”

Implementarea unui slider de imagine folosind javascript și CSS.

22. Glisor minunat „Tinycircleslider”

Glisor rotund elegant. Tranziția între imagini se realizează prin tragerea cursorului sub forma unui cerc roșu în jurul circumferinței. Se va potrivi perfect în site-ul dvs. dacă utilizați elemente rotunde în designul dvs.

23. Glisor de imagine cu jQuery

Glisor ușor „Kit glisor”. Glisorul este disponibil în diferite modele: vertical și orizontal. Sunt implementate și diverse tipuri de navigare între imagini: folosind butoanele „Înainte” și „Înapoi”, folosind rotița mouse-ului, folosind clicul mouse-ului pe slide.

24. Galerie cu miniaturi „Kit Slider”

Galeria „Kit Slider”. Derularea miniaturilor se realizează atât pe verticală, cât și pe orizontală. Tranziția între imagini se realizează folosind: rotița mouse-ului, clicul mouse-ului sau trecând cursorul peste miniatură.

25. Slider de conținut jQuery „Kit Slider”

Glisor de conținut vertical și orizontal folosind jQuery.

26. Expunere de diapozitive jQuery „Kit Slider”

Prezentare de diapozitive cu schimbare automată a diapozitivelor.

27. Glisor CSS3 javascript profesional ușor

Un slider jQuery și CSS3 îngrijit creat în 2011.

Prezentare jQuery cu miniaturi.

29. Prezentare jQuery simplă

Prezentare de diapozitive cu butoane de navigare.

30. Prezentare minunată jQuery „Skitter”.

Plugin jQuery Skitter pentru a crea prezentări de diapozitive uimitoare. Pluginul acceptă 22 (!) tipuri de efecte de animație diferite la schimbarea imaginilor. Poate lucra cu două opțiuni de navigare în diapozitive: folosind numerele de diapozitive și folosind miniaturi. Asigurați-vă că urmăriți demonstrația, o descoperire de foarte bună calitate. Tehnologii utilizate: CSS, HTML, jQuery, PHP.

31. Prezentare de diapozitive „Incomod”

Prezentare funcțională de diapozitive. Slide-urile pot fi: imagini simple, imagini cu subtitrări, imagini cu tooltips, videoclipuri. Puteți folosi săgețile, linkurile cu numerele diapozitivelor și tastele stânga/dreapta de pe tastatură pentru a naviga. Prezentarea de diapozitive vine în mai multe versiuni: cu și fără miniaturi. Pentru a vedea toate opțiunile, urmați linkurile Demo #1 - Demo #6 situate în partea de sus a paginii demo.

Un design foarte original pentru glisorul de imagine, care amintește de un ventilator. Tranziție animată de diapozitive. Navigarea între imagini se realizează cu ajutorul săgeților. Există, de asemenea, o schimbare automată care poate fi activată și dezactivată folosind butonul Redare/Pauză situat în partea de sus.

Glisor animat jQuery. Imaginile de fundal se scalează automat când fereastra browserului este redimensionată. Pentru fiecare imagine apare un bloc cu o descriere.

34. Slider „Flux Slider” folosind jQuery și CSS3

Slider nou jQuery. Mai multe efecte animate grozave la schimbarea diapozitivelor.

35. Plugin jQuery „jSwitch”

Galerie animată jQuery.

O prezentare de diapozitive jQuery simplă cu schimbare automată a diapozitivelor.

37. Noua versiune a pluginului „SlideDeck 1.2.2”

Glisor de conținut profesional. Există opțiuni cu schimbare automată a diapozitivelor, precum și o opțiune care utilizează rotița mouse-ului pentru a vă deplasa între diapozitive.

38. Slider jQuery „Sudo Slider”

Glisor de imagine ușor folosind jQuery. Există o mulțime de opțiuni de implementare: schimbarea orizontală și verticală a imaginilor, cu și fără link-uri către numărul de diapozitive, cu și fără legende de imagine, diferite efecte de schimbare a imaginii. Există o funcție de schimbare automată a diapozitivelor. Link-uri către toate exemplele de implementare pot fi găsite pe pagina demo.

39. jQuery CSS3 slideshow

Prezentarea de diapozitive cu miniaturi acceptă modul de schimbare automată a diapozitivelor.

40. Slider jQuery „Flux Slider”

Glisor cu multe efecte de schimbare a imaginii.

41. jQuery simplu glisor

Glisor de imagine elegant folosind jQuery.

SliderPro este un slider jQuery receptiv cu suport pentru miniaturi și alte setări, inclusiv propriul API.

  • Glisorul se ajustează la dimensiunea ecranului în mod implicit. Nu numai imaginile vor fi scalate, ci și straturi cu conținutul dvs. suplimentar.
  • Suport pentru evenimente cu glisare la atingere ecrane tactile. Utilizarea punctelor de întrerupere - un analog al interogărilor media CSS, pentru a modifica setările glisorului pe diferite dimensiuni de ecran.
  • Animație lină folosind tranziții css3, animație layer, efect de estompare pentru schimbarea diapozitivelor.
  • Glisorul poate avea întreaga lățime a paginii, întregul ecran sau poate fi situat în interiorul unui container.
  • Schimbarea automată a înălțimii glisantei. Orientarea previzualizărilor poate fi verticală sau orizontală.
  • Încărcarea leneșă, retina și capacitatea de a încărca imagini diferite pentru anumite dimensiuni de ecran sunt acceptate pentru imagini.
  • Suport video, integrare lightbox, navigare cu săgeți, puncte, tastatură, miniaturi și multe, multe altele.
CSS

Includeți fișierul de stil:

HTML

Exemplu de marcare pentru inserarea unui glisor:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

consectetur adipisicing elit

JS

Conectam scripturile necesare:

Inițializam pluginul:

jQuery(document).ready(funcție($) ( $("#my-slider").sliderPro(); ));

Mai multe detalii despre glisor și utilizarea lui pot fi găsite pe Github. Link dedesupt.

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

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

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

Slick – plugin modern de glisare carusel

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

Conține un efect de tranziție „decolorat”, o funcție interesantă „mod central”, încărcare leneșă a imaginilor cu defilare automată. Funcționalitatea actualizată include adăugarea de diapozitive și a unui filtru de diapozitive. Toate pentru a vă asigura că configurați pluginul în funcție de cerințele dvs.

Modul demonstrativ | Descarca

Owl Carousel 2.0 – jQuery – plugin pentru utilizare pe dispozitive tactile

Acest plugin are un set mare de funcții, 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ție, redare video, redare automată slider, încărcare leneșă, reglare automată a înălțimii - acestea 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 funcțional, care vă permite să plasați un glisor pe o pagină - un carusel, care are un nucleu mic și nu consumă multe resurse ale site-ului. Plugin-ul 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

Slider jQuery ultra compact - carusel, a cărui funcționalitate este mult mai mare decât cea a unui slider obișnuit. Acestea includ previzualizarea unei singure imagini, afișarea caruselului cu mai multe imagini și afișarea glisorului bazat pe titlu.

Exemple | Descarca

Owl Carusel – glisor Jquery – carusel

Owl carusel este un glisor care acceptă ecrane tactile și tehnologia drag and drop, ușor de integrat î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 puțin cod Javascript.

Exemple | Descarca

Carusel 3D folosind TweenMax.js și jQuery

Magnific carusel 3D. Se pare că aceasta este încă o versiune beta, pentru că tocmai acum am descoperit 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 receptiv - carusel care folosește tehnologia bootstrap doar pentru noul tău site web.

Exemple | Descarca

Glisor pentru carusel Moving Box bazat pe cadrul Bootstrap

Cel mai popular pe site-urile web de portofoliu și de afaceri. Acest tip de slider - 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 arată destul de interesant. Suport excelent pentru metoda drag and drop și un sistem automat de defilare a diapozitivelor.

Exemple | Descarca

Slider de conținut Thumbelina

Un glisor puternic, adaptiv, carusel este perfect pentru un site web modern. Funcționează corect pe orice dispozitiv. Are moduri orizontale și verticale. Dimensiunea sa este redusă la doar 1 KB. Pluginul ultra compact are, de asemenea, tranziții excelente excelente.

Exemple | Descarca

Wow – glisor – carusel

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

Exemple | Descarca

Slider de conținut jQuery receptiv bxSlider

Redimensionați fereastra browserului pentru a vedea cum se adaptează glisorul. Bxslider vine cu mai mult de 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ă organizați vizualizarea imaginilor dvs. Puteți crea cu ușurință carusele de imagini personalizate de la baza prezentată în exemplu. Glisorul este adaptiv și optimizat pentru lucrul pe platforme mobile.

Exemple | Descarca

Scrollbox - plugin jQuery

Scrollbox este un plugin compact pentru crearea unui glisor - un carusel sau un crawl de text. Caracteristicile cheie includ efecte de defilare pe verticală și orizontală cu pauză la mouse-ul deasupra.

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: Responsive JQuery Slider Plugin - Carusel

Creatorii Flexisel s-au inspirat din pluginul old school jCarousel, realizând o copie a acestuia având ca scop funcționarea corectă a glisorului pe dispozitivele mobile și tablete.

Aspectul receptiv al Flexisel, atunci când rulează pe dispozitive mobile, este diferit de un aspect de dimensiunea ferestrei de browser. Flexisel este perfect adaptat pentru a lucra pe ecrane, atât de joasă, cât și de înaltă rezoluție.

Exemple | Descarca

Elastislide – glisor adaptiv – carusel

Elastislide se adaptează perfect la dimensiunea ecranului dispozitivului tău. 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

FlexSlider 2

Slider gratuit de la Woothemes. Este considerat pe bună dreptate unul dintre cele mai bune glisoare adaptive. 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 Carusel – glisor de imagine receptiv folosind jQuery. Suportă multe sisteme de gestionare a conținutului, cum ar fi WordPress, Drupal și Joomla. De asemenea, acceptă sistemele de operare Android și IOS și desktop fără probleme de compatibilitate. Șabloanele de carusel uimitoare încorporate vă permit să utilizați glisorul în modurile vertical, orizontal și circular.

Exemple | Descarca