Realizarea unui glisor în JavaScript cu propriile mâini. Realizarea unui glisor simplu folosind jQuery
1. Excelent prezentare jQueryO 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”
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 și 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. Galeria jQuery CSS 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 foarte profesional, de înaltă calitate, ușor, 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. Prezentare 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 de diapozitive jQuery cu miniaturi.
29. Prezentare jQuery simplă
Prezentare de diapozitive cu butoane de navigare.
30. Prezentare minunată de diapozitive 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 jQuery ușoară 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. Glisor jQuery simplu
Glisor de imagine elegant folosind jQuery.
42. „Craftyslide” jQuery slideshow
Prezentare jQuery HTML5 care se întinde pe toată lățimea ecranului cu sunet.
O simplă prezentare de diapozitive jQuery.
18.05.15 48.9KDacă 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.
Cele mai recente tendințe, cum ar fi designul responsive, 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 SliderRecent, 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 receptiv bazat pe JQuery / ZeptoSingura 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
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
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
O galerie în stil de documente împrăștiate pe un birou, cu un aspect flexibil și un design frumos, ar trebui să fie de interes pentru mulți dintre voi. Mai potrivite pentru tablete și ecrane mari:
Demo | Descarca
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 diferite tipuri de conținut: imagini, videoclipuri YouTube și videoclipuri Vimeo;
- Configurare flexibilă;
- Caracteristici suplimentare utile;
- Cantitate nelimitată de conținut afișat.
Demo |Descărcare
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 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
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 de cerințele minime pentru crearea unui 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
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
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 prin clic cu mouse-ul.
Demo |Descărcare
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
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
Fără clopote și fluiere inutile, o dimensiune mai mică de 3 KB. Utilizați orice cod HTML pentru diapozitive, extindeți-l cu CSS. Tot ce are legătură cu Unslider este găzduit pe GitHub:
- Suport pentru diverse browsere;
- Suport tastatură;
- Ajustarea înălțimii;
- Design adaptiv;
- Suport de introducere prin atingere.
Demo | Descarca
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 gamă largă de browsere, inclusiv toate versiunile de IE de la IE6 și mai sus:
- 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
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 este un plugin receptiv pentru JQuery (1.7.1 și mai sus) 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
Acesta este un slider jQuery responsiv gratuit:
- Complet receptiv – 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);
- apeluri inverse API și metode complet publice;
- Dimensiune mică a fișierului;
- Ușor de implementat.
Demo |Descărcare
Cel mai bun glisor receptiv. Noua versiune a fost îmbunătățită pentru a crește viteza și compactitatea.
Demo | Descarca
Galleria este folosită pe milioane de site-uri pentru a crea galerii de imagini de înaltă calitate. 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
Vă prezint un slider de imagine jQuery scris special pentru design web responsive. Blueberry este un plugin experimental de glisare a imaginilor open source care a fost scris special pentru a funcționa cu șabloane receptive:
- Design minimal;
- Aspect adaptiv;
- Prezentări.
Demo | Descarca
Sunt utilizate elemente standard ale primei versiuni a programului: glisorul se ascunde la stânga și apare în sus la dreapta. Aceleași elemente de navigare și subtitrări care apar la trecerea mouse-ului:
- Design adaptiv;
- Suport pentru semnături;
- Modul de prezentare de diapozitive.
Demo | Descarca
Încercați acest plugin uimitor. Animarea mai multor elemente la afișarea imaginilor cu setări pentru fiecare dintre ele. FractionSlider este un plugin jQuery pentru imagini sau text. Vă permite să animați mai multe elemente de diapozitive simultan. Puteți seta diferite metode de animație, cum ar fi schimbarea cadrelor sau deplasarea într-o anumită direcție:
- Design adaptiv;
- Animarea elementelor;
- Gestionați setările de animație;
- Animație de fundal.
Demo |Descărcare
Cu FlexSlider putem codifica un slider cu o interfață „impresionistă”. Pluginul vă permite să adăugați funcționalități și stiluri prin CSS3. Sper să vă placă și să îl folosiți în proiectele dvs. Să enumerăm funcțiile sale:
- Design adaptiv;
- Efecte de estompare;
- Săgeți stânga, dreapta;
- Butoane verzi.
Demo |Descărcare
Vine cu patru teme și doar cele mai sofisticate, cum ar fi glisorul în stil Apple și glisorul de paralaxă orizontală, nu sunt receptive:
- Trei teme gratuite;
- Paralaxă orizontală glisantă;
- stilul mere;
- Teme adaptative;
- Suport pentru dispozitive tactile;
- Modificare usoara;
- Suport pentru diferite browsere.
- Toate toboganele noastre sunt proiectate sub formă de blocuri de aceeași dimensiune, unul după altul. Fereastra glisor este doar partea vizibilă a elementului care conține toate diapozitivele.
- Definim offset-ul marginii din stânga a slide-ului curent față de marginea din stânga a elementului părinte folosind proprietatea offsetLeft.
- Și deplasăm elementul părinte cu această valoare, astfel încât elementul necesar să fie afișat în fereastra glisor.
- Obținem obiectul elementului părinte, care în cazul nostru este containerul cu identificatorul slider-nav .
- Obținem toate elementele de navigare ca o serie de link-uri.
- Selectăm elementul primit ca intrare adăugându-l la clasa curentă.
- Într-o buclă, parcurgem toate elementele de navigare și ștergem valoarea clasei pentru toate, cu excepția celei curente. Acest lucru este necesar pentru a deselecta elementul care era curent înainte de apelul acestei funcții.
- faceți o configurație externă, astfel încât să puteți configura ușor glisorul;
- face posibilă încorporarea unui glisor în interiorul paginii (în prezent este conceput doar ca pop-up);
- încărcarea asincronă a codului HTML (acum sincron, care este marcat ca depășit de multe browsere);
- împachetați biblioteca ca pachet, NPM, Bower sau alt pachet, astfel încât să poată fi instalată și dependențele gestionate folosind manageri de pachete;
- faceți aspectul adaptabil pentru utilizarea caruselului JS pe diverse dispozitive;
- faceți comutarea diapozitivelor pe baza evenimentului Swipe pentru utilizatorii de telefonie mobilă.
Rău Bun
Avem nevoie de un glisor simplu cu defilare automată. Să începem...
Descrierea modului în care funcționează glisorul.Diapozitivele vor fi aliniate și se vor derula după o anumită perioadă de timp.
Cadrul roșu arată partea vizibilă a glisorului.
La sfârșitul glisorului trebuie să duplicați primul diapozitiv. Acest lucru este necesar pentru a asigura derularea de la al treilea slide la primul. De asemenea, trebuie să adăugați ultimul diapozitiv la început pentru a putea derula înapoi de la primul diapozitiv la al treilea. Mai jos este arătat cum funcționează glisorul în direcția înainte.
Când glisorul ajunge la sfârșit, o copie a acestuia de la începutul glisorului este plasată instantaneu în locul ultimului slide. Apoi ciclul se repetă din nou. Acest lucru creează iluzia unui glisor nesfârșit.
Marcaj HTMLMai întâi, să facem un glisor simplu cu defilare automată. Este nevoie de două containere pentru a funcționa. Primul va seta dimensiunea zonei vizibile a glisorului, iar al doilea este necesar pentru a plasa glisoarele în el. Dispunerea glisorului va arăta astfel:
Container.slider-box specifică dimensiunile glisorului. Folosind proprietatea overflow:hidden, toate elementele care nu sunt incluse în zona din interiorul elementului sunt ascunse.
Container.slider este setat la o lățime mai mare. Acest lucru este necesar pentru ca toate diapozitivele să se încadreze în linie.
Diapozitivele sunt aliniate folosind proprietatea float:left.
Mai jos este un aspect schematic al blocurilor de glisare.
Slide-urile se vor mișca prin schimbarea lină a proprietății margine-stânga a containerului.slider.
$(funcție () ( var width= $(".slider-box" ) .width () ; // Lățime slider. interval = 4000 ; // Interval de schimbare a diapozitivei. $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // O copie a ultimului slide este plasată la început $() .eq (1 ) .clone ().appendTo ( "slider" ) // Container.slider este deplasat la stânga cu lățimea unui diapozitiv setInterval("animation()" , interval) ; // Funcția animation() este lansată pentru a schimba slide-urile. function animation() ( var margin = parseInt($(".slider") .css ("marginLeft" ) ) ); // Blocul curent offset.slider width= $(".slider-box" ) .width () , / / Slider width. SlidersAmount= $(".slider" ) .children ().length ; slide nu este ultimul , ( margin= margin-width; // atunci valoarea marginii este redusă cu lățimea diapozitivului. ) altfel ( // Dacă este afișat ultimul diapozitiv, $(".slider") . css ("margin-left" , - width) ; // apoi block.slider revine la poziția inițială, margin=- width* 2 ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ; ; // Block.slider este deplasat la stânga cu 1 slide ) ;Rezultatul este un glisor simplu cu defilare automată nesfârșită.
Designul web adaptiv, sau dacă preferați, responsive web design nu este acum doar o altă tendință de design, este deja un anumit standard pentru dezvoltarea site-urilor web, asigurând versatilitatea site-urilor web și percepția vizuală armonioasă pe ecranele diverselor dispozitive ale utilizatorilor. Mai recent, când am dezvoltat un șablon responsive, am avut de-a face cu diverse dificultăți în integrarea anumitor glisoare și galerii de imagini fără a deranja stilul general de design. În zilele noastre totul este mult mai simplu, există un număr mare de soluții gata făcute pe Internet și ceea ce este deosebit de plăcut este că majoritatea sunt disponibile gratuit, open source.
Datorită varietatii de instrumente oferite, am compilat o scurtă prezentare generală a celor mai notabile dezvoltări ale glisoarelor de imagine jQuery responsive care au apărut recent și sunt distribuite fără restricții, de exemplu. absolut gratuit.
WOW SliderGlisor de imagine jQuery receptiv cu un set grozav de efecte vizuale (rotație, flyout, estompare, spirale, jaluzele etc...) și multe șabloane gata făcute. Cu ajutorul asistentului de inserare a paginii încorporat din WOW Slider, puteți crea cu ușurință și fără efort prezentări de diapozitive uimitoare în câteva minute. Site-ul web al dezvoltatorului conține toată documentația necesară pentru configurarea și utilizarea pluginului în limba rusă, precum și exemple live excelente despre cum funcționează pluginul. Un plugin Wordpress separat și un modul pentru Joomla sunt, de asemenea, disponibile pentru descărcare. Sunt sigur că multora le va plăcea acest slider minunat, atât începătorilor, cât și webmasterilor experimentați.
HiSliderHiSlider - HTML5, slider Jquery și galerie de imagini, plugin absolut gratuit pentru uz personal pe site-uri care rulează sisteme populare - WordPress, Joomla, Drupal. Cu ajutorul acestui instrument simplu, dar destul de funcțional, puteți crea cu ușurință prezentări de diapozitive uimitoare și vibrante, prezentări spectaculoase și anunțuri de mesaje noi pe paginile site-urilor dvs. web. Mai multe șabloane și skinuri gata făcute pentru glisor, efecte uimitoare de tranziție (modificare) a conținutului, ieșire de conținut multimedia variat: videoclipuri de pe YouTube și Vimeo, setări flexibile pentru utilizator etc...
Nivo Slider este unul vechi bun, bine cunoscut de toți cei cunoscători, unul dintre cele mai frumoase și mai ușor de utilizat glisoare de imagine. Pluginul JQuery Nivo Slider poate fi descărcat și utilizat gratuit și este licențiat sub licența MIT. Există și un plugin separat pentru WordPress, dar, din păcate, este deja plătit și va trebui să plătiți 29 USD pentru o licență. Este mai bine să faceți puțină magie cu fișierele cu tema WP și să atașați versiunea jQuery gratuită a pluginului Nivo Slider pe blogul dvs., deoarece există o mulțime de informații despre cum să faceți acest lucru pe Internet.
În ceea ce privește funcționalitatea, totul este în perfectă ordine. Folosește biblioteca jQuery v1.7+, efecte frumoase de tranziție, setări simple și foarte flexibile, aspect adaptiv, tăiere automată a imaginii și multe altele.
Ideea glisorului a fost inspirată de dezvoltatori, care sunt cunoscuți pentru stilul de prezentare al produselor Apple, unde mai multe obiecte mici (imagini) se schimbă făcând clic pe categoria selectată cu un simplu efect de animație. Codrops vă prezintă la dispoziția dumneavoastră un tutorial detaliat despre cum să creați acest glisor, un aspect complet al marcajului HTML, un set de reguli CSS și un plugin jQuery executabil, precum și un minunat exemplu live de utilizare a glisorului.
Glisor de imagine pe ecran complet folosind JQuery și CSS3 + tutorial detaliat despre integrarea pluginului în paginile site-ului. Ideea este să tăiați diapozitivul curent deschis cu conținut specific atunci când treceți la conținutul următor sau anterior. Folosind animația JQuery și CSS puteți crea tranziții unice între diapozitive. Aspectul receptiv al glisorului asigură că arată la fel de bine pe diferite tipuri de dispozitive de utilizator.
Un glisor de conținut care se ajustează automat în lățime și înălțime în funcție de dimensiunea containerului părinte în care se află. Destul de simplu de implementat și flexibil în setări, glisorul rulează pe JQuery, cu navigarea în jos când dimensiunea ecranului este schimbată în jos, navigarea este afișată sub formă de pictograme; Documentație foarte detaliată (tutorial de creare) și exemple live de utilizare.
O versiune experimentală a glisorului care demonstrează imagini cu tranziții din planul 3D. Imaginile sunt împărțite în două stive orizontale, folosind săgețile de navigare pentru a schimba și trece fiecare imagine ulterioară în starea de vizualizare. În general, nimic deosebit, dar ideea în sine și tehnica de execuție sunt destul de interesante.
Un glisor de imagine jQuery foarte simplu, 100% receptiv și pe tot ecranul. Funcționarea glisorului se bazează pe tranziții CSS (proprietatea de tranziție) în combinație cu magia jQuery. Valoarea lățimii maxime este setată la 100% în mod implicit, astfel încât dimensiunea imaginilor se va schimba în funcție de modificările dimensiunii ecranului. Nu există efecte speciale de animație sau bibelouri în design, totul este simplu și conceput pentru o funcționare fără probleme.
Numele vorbește de la sine, acesta este poate unul dintre cele mai ușoare și minimaliste glisoare de imagine jQuery pe care le-am întâlnit (plugin de 1 kb). ResponsiveSlides.js este un mic plugin JQuery care creează prezentări de diapozitive folosind elemente din interiorul unui container. Funcționează cu o gamă largă de browsere, inclusiv toate versiunile de IE - faimoasa frână a progresului, de la IE6 și mai sus. Lucrarea folosește tranziții CSS3 împreună cu javascript pentru fiabilitate. Aspect simplu folosind o listă neordonată, personalizarea tranzițiilor și a intervalelor de timp, controlul automat și manual al comutării diapozitivelor, precum și suport pentru mai multe prezentări de diapozitive simultan. Acesta este un „bebeluș” atât de jucăuș.
Camera este un plugin JQuery gratuit pentru organizarea de prezentări de diapozitive pe paginile site-ului web, un glisor ușor cu multe efecte de tranziție, un aspect 100% receptiv și setări foarte simple. Se potrivește perfect pe ecranele oricărui dispozitiv utilizator (monitoare PC, tablete, smartphone-uri și telefoane mobile). Posibilitatea de a demonstra video încorporat. Schimbarea automată a diapozitivelor și controlul manual cu ajutorul butoanelor și al blocului de miniaturi ale imaginii. O galerie aproape completă de imagini într-un design compact.
Un alt glisor destul de simplu receptiv în jQuery. Puteți plasa orice conținut, videoclip, imagini, text și alte elemente pe diapozitive. Suport extins pentru ecranele tactile. Utilizarea animațiilor de tranziție CSS. Un număr mare de variante diferite de prezentări de diapozitive și galerii de imagini compacte. Control automat și manual. Comutați diapozitive folosind butoane și selectând miniaturile. Dimensiunea mică a fișierului sursă, foarte ușor de configurat și implementat.
FlexSlider 2 - O versiune actualizată a glisorului cu același nume, cu o capacitate de răspuns îmbunătățită, minimizarea scriptului și minimizarea reflow/redrawing. Pluginul include un glisor de bază, control de diapozitiv cu miniaturi, săgeți încorporate stânga-dreapta și o bară de navigare de jos sub formă de butoane. Abilitatea de a afișa videoclipuri în diapozitive (vimeo), setări flexibile (tranziții, design, interval de timp), aspect complet adaptabil.
Un plugin jQuery responsiv bine cunoscut și destul de popular pentru crearea de galerii de imagini și slidere de înaltă calitate. Interfața slider, datorită panoului său de control, seamănă vizual cu un player video familiar, pluginul include mai multe teme de design diferite. Suport pentru videoclipuri și imagini încorporate de la servicii populare: Flickr, Vimeo, YouTube și altele. Documentație detaliată despre configurare și utilizare.
Un glisor de imagine jQuery simplu, fără ornamente, scris special pentru design web receptiv. Blueberry este un plugin experimental jQuery open source. Design minimalist, fără efecte, doar imagini pop-up care se înlocuiesc între ele după o anumită perioadă de timp. Totul este foarte simplu, instalați, conectați și mergeți...
Un slider de imagine jQuery foarte compact cu elemente Lightbox. Datorita dimensiunilor sale flexibile, este foarte usor de integrat in orice container, intr-o singura intrare sub forma de miniaturi, la trecerea cursorului mouse-ului sau la click pe ele, se activeaza un lightbox cu poza marita si comenzi. Este convenabil să plasați un astfel de glisor în panourile laterale pentru a prezenta produse sau anunțuri de știri. O soluție excelentă pentru site-urile cu o cantitate mare de informații.
Glisor cu răspuns gratuit cu tranziții CSS3 avansate. Stil minimalist, 3 teme de design, Fiecare cadru alunecă orizontal, apărând în centru, imaginea merge la stânga, semnătura în dreapta, miniaturile sunt duplicate în colțul din dreapta jos. Paginarea vizualizărilor de produse pentru a fi vizualizate în fiecare cadru. Comenzile includ, de asemenea, butoane înapoi și înainte. Sprijinit de toate browserele moderne.
Un slider de imagine foarte simplu atât din punct de vedere al funcționalității, cât și al setărilor se numără o modificare a vitezei de schimbare a diapozitivelor, activarea modului manual (butoanele de control sunt activate), prezentarea continuă; Acest slider are dreptul de a exista și m-a atras doar pentru că există nu am găsit nimic deosebit de interesant în această dezvoltare, poate nu l-am căutat bine)))
Un slider de imagine atât de frumos și adaptiv de la Vladimir Kudinov, tovarăși. Un instrument solid, bine conceput, prevăzut cu exemple ilustrative și instrucțiuni detaliate pentru creare, instalare și utilizare. Design adaptiv, butoane drăguțe și săgeți verzi, totul este destul de frumos și calm, fără presiune.
Plugin de glisare JQuery gratuit cu efect de paralaxă pentru imagini și diapozitive de text. Animațiile de diapozitive au mai multe valori de afișare cu control deplin în fiecare setare de sincronizare și animație. Abilitatea de a anima mai multe elemente dintr-un diapozitiv simultan. Puteți seta diferite metode de animație, fade de diapozitive sau tranziții dintr-o anumită direcție. Afișare automată și control manual folosind săgețile de navigare care apar atunci când treci cu mouse-ul peste imagine. 10 tipuri de efecte de animație de diapozitive și multe altele...
Recenzia s-a dovedit a fi destul de extinsă, dar nu suficient de informativă din cauza numărului mare de produse luate în considerare. Puteți afla toate detaliile și descrierile detaliate ale funcționalității unui anumit plugin direct pe paginile dezvoltatorilor. Nu pot decât să sper că am făcut mai ușor pentru cineva să găsească acel instrument foarte necesar pentru a crea glisoare de imagini colorate pe paginile site-urilor lor.
Cu tot respectul, Andrew
Uneori trebuie să rezolv probleme legate de front-end, în ciuda faptului că nu-mi place :)
De fapt, ai putea estima atitudinea mea față de tot ce ține de „frumos” din designul acestui site, care a fost dezvoltat doar de mine :)
Cu toate acestea, relativ recent m-am confruntat cu nevoia de a implementa un glisor în JavaScript, iar acest lucru trebuia făcut fără biblioteci gata făcute și chiar fără jQuery favorit al tuturor.
Această nevoie a fost cauzată de faptul că rezultatul ar fi trebuit să fie un script JS care să fie conectat la site printr-un serviciu terță parte. În consecință, caruselele gata făcute în JavaScript nu mai erau necesare, deoarece Pentru a le integra, a fost necesar să adăugați o conexiune de bibliotecă la codul HTML al site-ului printr-o etichetă de script și să copiați fișierele în sine fie pe server, fie să le extrageți prin cdn, dar acest lucru ar necesita din nou editarea codului resursei.
Cum să faci un slider JavaScript: începutulAstăzi, cred că toți cei care s-au găsit într-o situație similară au început prin a căuta dezvoltări existente, pentru că... atunci când sarcina de a realiza un carusel JS este în domeniul de aplicare, ar trebui să fie întotdeauna făcută cât mai repede posibil. Și în astfel de condiții, nimeni nu vă va permite să stați și să vă inventați propriile biciclete.
Clienților nu le pasă întotdeauna cum este scris codul, care este arhitectura lui, principalul lucru este să vadă rezultatul!
Ca rezultat, după cum înțelegeți, înainte de a scrie un slider în JavaScript fără jQuery, am decis să găsesc unul gata făcut și să îl modific pentru a se potrivi nevoilor mele. De ce nu jQuery? Da, pentru că pe resursa țintă, unde am plănuit să-mi conectez glisorul prin serviciu, apelul jQuery din cod a fost localizat mai târziu decât scriptul conectat de serviciu. Prin urmare, constructele jQuery din codul meu pur și simplu nu au fost percepute.
Ca bază, am luat acest slider de imagine JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.
Am decis să mă opresc acolo, pentru că... codul său JS a fost scris folosind principiile OOP și clasele sale se bazează pe prototipuri, nu pe funcții banale.
Sincer să fiu, nu înțeleg și nu recunosc hype-ul actual în jurul JavaScript-ului folosind POO, cadre și alte lucruri arhitecturale într-un limbaj care a fost inițial intenționat să fie un simplu limbaj de scripting dinamic. La fel ca JS în sine, îmi displace sincer cu vinaigreta sa sintactică, care permite ca aceleași construcții să fie scrise în mai multe moduri.
Dar, din păcate, în lumea modernă puțini oameni îmi împărtășesc pozițiile, pentru că... acest limbaj se dezvoltă într-un ritm nebun și chiar încearcă să câștige mințile dezvoltatorilor de backend care folosesc Node.js ca alternativă la Java, PHP, C#, Ruby și alți monștri.
Drept urmare, pentru a nu rămâne pur și simplu fără muncă, trebuie să vă dați seama în liniște JavaScript. Și în implementarea pură a sliderului JavaScript pe care am ales-o, am întâlnit ceva pe care, după cum înțelegeți, îl disprețuiesc în acest limbaj. De aceea l-am ales, astfel încât să existe măcar un motiv pentru a lucra și a înțelege JavaScript OOP și clasele prototip - altfel nu le-aș fi atins de bunăvoie în viața mea :)
Pe baza codului pe care l-am găsit, trebuia să dezvolt un glisor în JS pur într-o fereastră pop-up (acest lucru se mai numește și popup, popup etc.), care ar avea butoane pentru comutarea diapozitivelor și indicatori pe care se poate face clic ai curentului. diapozitiv. De asemenea, a fost necesar să se facă un buton pentru a închide această fereastră.
Cu asta am ajuns.
Realizarea unei biblioteci JS sliderÎn primul rând, am decis să implementez totul cu înțelepciune și să fac un slider JavaScript pentru site sub forma unei biblioteci care poate fi conectată la site cu un singur script, în care vor fi apelate componentele sliderului, împărțite în subdirectoare. Am decis să-l numesc popupSlider.js în onoarea scopului său inițial.
Codul său poate fi găsit pe GitHub la această adresă - https://github.com/Pashaster12/popupSlider.js
Structura bibliotecii este următoarea:
Dosarul de diapozitive este pentru imagini de diapozitive. Comenzile conține imagini ale comenzilor caruselului JS (butoane pentru închiderea glisorului și comutarea diapozitivelor). Și în active există elemente statice ale glisorului JS: marcaj HTML și un fișier cu stiluri CSS.
Ei bine, fișierul popupSlider.js este inima bibliotecii în sine, în care sunt scrise acțiunile JavaScript ale caruselului și se stabilește o conexiune cu alte fișiere. Acesta este pe care îl vom conecta pe site și îi va chema pe celelalte.
Am decis să încep cu marcajul HTML al caruselului nostru de imagini JS, care în cazul meu arată astfel:
Textul 1 
Textul 2 
Textul 3
Pentru a proiecta glisorul în JavaScript ca pop-up, am folosit următoarele stiluri:
#slider ( margine: automat; lățime: 600px !important; overflow: ascuns; ) #slider-wrapper ( lățime: 9999px; înălțime: 343px; poziție: relativă; tranziție: stânga 400ms liniar; ) .slide ( float: stânga; lățime : 600px; poziție: depășire relativă: ascuns; .caption (lățime: 600px; înălțime: 110px; înălțime: 1,5; dimensiunea fontului: 15px; greutatea fontului: 300; text-align: center; culoare: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav (poziție: absolut; jos: -36px; text-align: center; stânga: 50%; transformare: translateX(-50%); #slider-nav a ( lățime: 8px; înălțime: 8px; text-decor: #000; afișare: inline-block; chenar-rază: 50% ; margine: 0 5px; culoare de fundal: #fafafa ) #slider-nav a.current (culoare de fundal: #337ab7; ) control-orizontal (poziție: absolut; lățime: 12px; : 20px: 50% margin-top: -10px; stânga: -40px; ) #prev:hover ( fundal: url(../controls/arrow_left_active.png); ) #next ( fundal: url(../controls/arrow_right_inactive.png); dreapta: -40px; ) #next:hover ( fundal : url(../controls/arrow_right_active.png); #cq-popup ( lățime: 600px; z-index: 23; stânga: calc(50%); sus: calc(50%); poziție: fix !important ; background-repeat: no-repeat: #fff font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; %, -50%) scale(1); #cq-popup .header ( afișare: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( lățime: 500px; font- dimensiune: 22px; înălțime de linie: 36px; ; înălțime: 16px; lățime: 16px ) #cq-popup-btclose:hover ( background: url(../controls/btn_delete_active.png); ) #cq-popup-bg (poziție: fix; 100%; inaltime: 100%; fundal: rgba(51,51,51,0.8); indicele z: 22; )
Ca rezultat al aplicării acestor stiluri JS, caruselul arată astfel:
Am mutat atât stilurile de marcare HTML, cât și CSS în fișiere separate popupSlider.html și popupSlider.css, care se află în directorul de active al bibliotecii glisante JavaScript. Am făcut acest lucru în mod intenționat, astfel încât, atunci când folosesc acest cod, utilizatorii să poată ajusta cu ușurință marcajul și designul fără a se încurca în codul JS, unde ceea ce ar trebui să fie scris ar trebui scris direct.
În plus, multor oameni încă le place să minimizeze JS pentru a accelera încărcarea site-ului. Deci ar fi foarte dificil să personalizați această soluție în condițiile specificate.
Ca urmare, am decis să includ pur și simplu fișiere gata făcute în fișierul bibliotecii principale popupSlider.js, care pentru sarcina mea a luat următoarea formă:
Funcție Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll) ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"("#prev"); navigate: function (); ) ( var self = this; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = „blocare”; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: funcție (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Câteva comentarii despre codul de mai sus. Conținutul fișierului popupSlider.js este o singură clasă JavaScript Slider, care, ca și în PHP, conține un constructor și metode de clasă. Numai în JS, definiția unui constructor, spre deosebire de PHP, este obligatorie.
Constructorul este definit folosind următorul construct:
Funcție Slider(element) ( //cod constructor)
În interiorul constructorului trebuie specificate acțiunile care vor fi efectuate la crearea unui obiect de clasă.
Metodele clasei în sine vor fi localizate în interiorul prototipului și vor fi disponibile pentru toate instanțele acestei clase JavaScript. Prototipul JS în cazul meu este descris de următorul design:
Slider.prototype = ( //metode )
Aceștia vor fi chemați în afara corpului clasei după cum urmează:
Var slider = new Slider(); slider.class_method();
Și în interiorul codului clasei în sine, este disponibilă următoarea metodă:
This.class_method();
Principalul lucru este să nu uităm că în JavaScript valoarea acestuia depinde de contextul apelului, astfel încât în corpurile unor metode în care a fost necesar să apelați metode și proprietăți ale unei clase, există o astfel de construcție:
Var self = aceasta; self.class_method(); // pentru a accesa o metodă care este cu un nivel mai mare decât codul metodei descrise
Se pare că am vorbit despre toate nuanțele scrierii codului. Acum câteva cuvinte despre metodele clasei noastre JavaScript, care conțin descrieri ale acțiunilor JS ale caruselului de imagini.
loadStatic()
Prima metodă numită atunci când o instanță a unei clase este creată în constructor. Responsabil pentru adăugarea unui marcaj de glisare și a unui fișier cu stiluri la codul HTML al paginii site-ului.
În primul rând, o nouă etichetă de legătură este creată în memorie folosind funcția JavaScript document.createElement() și îi sunt atribuite valorile tuturor atributelor necesare, inclusiv calea către fișierul CSS cu stilurile de glisare JS. Și, în sfârșit, este adăugat la pagina HTML folosind metoda JavaScript appendChild() la sfârșitul secțiunii head, unde ar trebui să fie stilurile.
Apoi, facem același lucru pentru fișierul cu marcajul HTML al glisorului nostru în JavaScript pur. Există doar o mică nuanță aici: nu puteți include doar un fișier HTML în același, așa cum am făcut cu un fișier CSS. Există biblioteci speciale pentru aceasta, de exemplu, pentru a include HTML în HTML, lib de la w3.org este excelentă - https://www.w3schools.com/howto/howto_html_include.asp
Dar atunci ar trebui fie să fie inclus în biblioteca de glisare, fie să le ceară utilizatorilor să o instaleze ei înșiși. Dar toate acestea sunt suboptimale, pentru că... necesită multe mișcări ale corpului și încetinește viteza de încărcare a site-ului datorită scripturilor suplimentare.
În cele din urmă, am decis să iau conținutul fișierului HTML în codul JavaScript și să îl încărc într-un nou element div creat în memorie, la fel cum am făcut mai devreme pentru a include un fișier CSS în JavaScript. Elementul generat este inclus la sfârșitul secțiunii body a codului HTML al paginii site-ului.
Dacă doriți să inserați un div cu marcaj glisor nu doar la sfârșitul corpului, ci într-un anumit container, puteți în loc de următorul cod:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Introduceți următoarele, specificând identificatorul dorit al containerului țintă (în cazul meu, glisorul HTML JS va fi localizat în elementul cu id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Metoda, care este apelată în constructor după loadStatic(), este necesară pentru a inițializa proprietățile clasei corespunzătoare principalelor elemente HTML pe care le vom accesa în următorul cod.
La final, este apelată metoda navigate().
naviga ()
În această metodă, acțiunile care apar atunci când faceți clic pe butoanele comutatorului cu glisare și pe elementele de navigare situate sub glisorul în sine sunt indicate sub formă de cercuri.
Pentru comoditate, am mutat codul JavaScript pentru schimbarea diapozitivelor într-o metodă separată slide(), dar în aceasta doar îl atașez la evenimentul clic pentru fiecare buton rotund din buclă.
Când faceți clic pe butoanele „diapozitivul anterior” / „diapozitivul următor”, după cum puteți vedea, am decis să emulez doar un clic pe cercul corespunzător, definindu-l pe cel dorit în raport cu cel curent, care are un curent de clasă CSS.
slide(element)
Metoda „responsabilă pentru magia” a caruselului JavaScript în sine, care conține codul care schimbă pozițiile diapozitivelor. La început, este apelată metoda setCurrentLink(), despre care vom vorbi puțin mai târziu.
Obiectul butonului de navigare glisor JS sub forma unui cerc îi este transmis ca parametru de intrare.
Comutatorul glisant în sine funcționează astfel:
La sfârșitul metodei, este descris comportamentul butoanelor „diapozitivul anterior”/”diapozitivul următor”, concepute ca săgeți stânga/dreapta, respectiv. Dacă diapozitivul curent este primul din întreaga listă, atunci butonul pentru a trece la diapozitivul anterior este ascuns. Dacă acesta din urmă, atunci eliminați butonul pentru a trece la următorul diapozitiv.
setCurrentLink(link)
Această metodă a clasei noastre de glisare JavaScript este responsabilă pentru evidențierea butonului rotund de navigare corespunzător elementului curent. Acestea. dacă avem al doilea slide selectat, al doilea buton va fi evidențiat.
Obiectul butonului care ar trebui selectat ca fiind cel curent este transmis ca parametru de intrare funcției.
Logica pentru evidențierea elementului curent este simplă:
Ultima metodă a clasei, care definește acțiunea atunci când faceți clic pe butonul de închidere al glisorului sub forma unei cruci. Aici, de fapt, codul este cel mai ușor de înțeles dintre toate conținute în clasa glisor JS.
Când faceți clic pe butonul de închidere, care este accesat prin identificatorul acestuia, elementul glisor și elementul care stabilește fundalul translucid sunt eliminate din pagină. Ele sunt, la rândul lor, obținute prin identificatori unici.
Metoda în sine este numită în navigate(), descris anterior, care conține toate scenariile de acțiuni care au loc pe glisorul nostru JavaScript.
Apropo, dacă doriți să închideți glisorul când faceți clic în afara lui, atunci adăugați următorul cod la această metodă:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Prezentare de diapozitive JavaScript bazată pe biblioteca dezvoltatăUneori, în practică, este posibil să aveți nevoie să faceți un carusel de derulare JS, care este adesea numit o prezentare de diapozitive. În cazul meu, acest lucru nu era necesar, dar am decis totuși să fac unul pe baza codului final al bibliotecii pentru un caz în care ar putea fi util.
De fapt, implementarea JavaScript a unei prezentări de diapozitive diferă destul de puțin de un slider obișnuit. Singura diferență este că într-o prezentare de diapozitive, slide-urile comută automat la un interval de timp dat, în timp ce în cazul unui carusel JS obișnuit se schimbă manual folosind elemente de navigare.
SlideShow: function (timeout) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current")).getAttribute ("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1 self.slide(document.querySelector(""));
Cred că este clar ce se întâmplă aici. Pentru a crea această metodă, am copiat codul din evenimentul de clic al butoanelor de slide manuale și l-am plasat într-un apel JavaScript la funcția setInterval(), care efectuează acțiunea specificată după o perioadă de timp specificată.
Scriptul de acțiune este trecut ca prim argument ca funcție anonimă, iar intervalul de timp este trecut ca al doilea, pe care am decis să îl fac ca o variabilă a cărei valoare este transmisă atunci când este apelată slideShow().
Singura modificare a codului din setInterval() care a fost necesară a fost de a determina numărul de diapozitive și de a compara indexul slide-ului curent cu acesta pentru a ciclă comutarea automată.
Ei bine, pentru ca acest cod să funcționeze, metoda în sine trebuie apelată. Am decis să fac toate acestea în același navigate(), care este tocmai o colecție de tot felul de scripturi. Am plasat apelul la sfârșit, trecând ca argument valoarea intervalului de timp pentru schimbarea automată a diapozitivelor din prezentarea noastră de diapozitive JS (am ales 2000 de milisecunde sau 2 secunde, puteți modifica acest număr după cum este necesar):
Self.slideShow(2000);
După aceasta, verificați funcționarea glisorului JavaScript, fără a uita să vă curățați browserul.
În teorie, totul ar trebui să funcționeze. Dacă nu, studiază erorile din consola browserului și distribuie-le în comentarii.
Ca rezultat, am obținut o expunere de diapozitive JS în care diapozitivele comută automat și într-un cerc, de exemplu. Când se ajunge la ultimul diapozitiv, spectacolul intră într-o nouă buclă și spectacolul începe din nou de la primul element.
Când lucram cu diferite biblioteci JS pentru carusele de imagini și recenzii, am observat că dezvoltatorii folosesc în mod activ această practică, dar cu ceva adaos. În toate soluțiile pe care le-am văzut, prezentarea automată de diapozitive este întreruptă dacă utilizatorul face o comutare manuală. Așa că am decis să fac același lucru în biblioteca mea.
Pentru a întrerupe afișarea automată a diapozitivelor din carusel JavaScript, am decis să folosesc funcția standard JS clearInterval(), căreia îi trec ca argument identificatorul intervalului de timp returnat de funcția setInterval() atunci când este setată.
Ca rezultat, am primit următorul cod, pe care am decis să nu îl scriu ca metodă separată:
ClearInterval(self.slideCycle);
Și l-a plasat în locuri care descriu acțiunile atunci când faceți clic pe diferite elemente de navigare, de exemplu. în cele ce urmează:
Link.addEventListener("click", funcția (e) (...)); self.prevBtn.addEventListener(„clic”, funcția (e) (...)); self.nextBtn.addEventListener(„clic”, funcția (e) (...));
Este mai bine să apelați clearInterval() mai aproape de evenimentul clic în sine, principalul lucru este că este înaintea lui, și nu după el.
Integrarea cursorului JavaScript în site-ul webDeci, glisorul nostru în JS pur este gata. Acum nu mai rămâne decât să-l conectați la site.
Pentru a face acest lucru, trebuie să efectuați secvențial următorii pași, care sunt acțiuni standard atunci când integrați biblioteci JavaScript terțe în general.
Pasul 1 . Copiem fișierele bibliotecii pe site-ul nostru într-un director separat.
Pasul 2. Adăugați următorul cod la codul HTML al paginilor în care va trebui să fie afișat glisorul, plasându-l înaintea etichetei de închidere a corpului:
Pasul 3. Plasăm următorul cod pentru a apela caruselul JS în orice fișier JavaScript existent, care este inclus în pagină după conectarea glisorului în sine:
Var aSlider = new Slider("#slider");
După cum puteți vedea, acest cod creează în esență un obiect al clasei Slider, care este conținut în popupSlider.js. De aceea ar trebui să fie apelat numai după conectarea fișierului de clasă în sine la pagină.
Adăugarea de noi diapozitive la un carusel JavaScriptTotul este foarte simplu aici. Deoarece diapozitivele noastre sunt preluate dintr-un director separat al bibliotecii de diapozitive, atunci când adăugați imagini noi, va trebui doar să aruncați fișierele necesare în el, după ce le-ați dat mai întâi aceeași dimensiune ca și celelalte.
Și apoi în codul fișierului assets/popupSlider.html adăugați un nou bloc la container cu id slider-wrapper :
Text
În principiu, puteți pur și simplu să copiați unul similar existent și să schimbați calea către fișierul imagine și textul semnăturii (dacă este necesar).
De asemenea, va trebui să adăugați un nou element de navigare sub forma unui cerc, deoarece... În prezent, adăugarea sa automată nu a fost încă implementată. Pentru a face acest lucru, va trebui să adăugați următorul cod în container cu id-ul slider-nav, scriindu-l la sfârșit:
Valoarea atributului data-slide trebuie să fie mai mare decât cea mai mare valoare a celorlalte elemente. Este suficient doar să crești curentul maxim cu unul.
Împachetarea caruselului JS într-un singur scriptGata, glisorul JavaScript este gata și conectat. Recomand personal să folosiți această opțiune în practică dacă aveți nevoie de ea :)
Pentru a-i accelera funcționarea, apropo, puteți comprima și mai mult componentele statice: fișiere CSS, HTML și JavaScript. Nu am făcut asta și ți-am oferit cod minimizat, pentru că acum există o mulțime de sisteme de construcție frontend: Gulp, Grunt, Webpack și altele. Și fiecare dintre ele are propriii algoritmi pentru comprimarea și conectarea fișierelor.
În plus, rezultatele reduse pot funcționa diferit pe diferite sisteme de operare. În general, există multe motive.
Și codurile sursă în sine, cred, nu sunt atât de grele încât să aibă nevoie de această procedură. Dar dacă aveți nevoie de ele, configurați singur minificarea, ținând cont de sistemul de operare și de colector.
După cum am scris la început, pentru a rezolva sarcina stabilită inițial pentru mine, trebuia să obțin un singur fișier JS pentru utilizarea corectă a glisorului meu printr-un serviciu terță parte de pe site. Din acest motiv, eu, strict vorbind, nu am folosit biblioteci gata făcute de la terți.
Atunci opțiunea unui singur script carusel JavaScript vă va fi utilă, deoarece... tot conținutul va fi conținut direct în acesta, inclusiv codul HTML/CSS, care în cazul unei biblioteci este stocat în fișiere separate.
În cazul meu, scenariul constă din două părți. Prima parte conținea conținutul fișierului popupSlider.js, pe care nu îl voi prezenta a doua oară. Introduceți-l singur, eliminând descrierea metodei loadStatic() și apelul acesteia din codul clasei, deoarece nu vom avea nevoie de ele.
A doua parte a unui singur script glisor JavaScript pentru site este un handler pentru evenimentul DOMContentLoaded, care are loc atunci când conținutul paginii este încărcat.
Acolo vom adăuga codul JS carusel la pagina HTML/CSS și vom crea un obiect din clasa Slider, ceea ce echivalează cu activarea slider-ului în sine.
Schematic codul arată astfel:
/* conținutul popupSlider.js fără a descrie metoda loadStatic() și apelul acesteia */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*cod css*/ \ /* cod html * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider ("#slider");
Deoarece în cazul meu opțiunea de încărcare a fișierelor pe server a fost complet închisă, a trebuit să încarc fișierele imagine ale comenzilor caruselului JavaScript în cloud și în locul căilor către acestea în codul HTML și CSS, să scriu linkurile generate atunci când economisire.
Dacă nu aveți astfel de dificultăți, atunci nu trebuie să schimbați nimic, dar nu uitați să copiați directoarele bibliotecii de diapozitive și controale pe server și să specificați căile corecte către ele.
Slider JS personalizat - perspective de dezvoltareSincer să fiu, nu intenționez să mă angajez în suport și dezvoltare direcționată a soluției pe care am creat-o :) În acest moment, există o grămadă de glisoare similare și un cărucior mic, care, spre deosebire de al meu, au propria lor istorie, sunt testate temeinic și sunt susținute de o comunitate mare de utilizatori și dezvoltatori.
Cumva nu este interesant pentru mine să încep toată această călătorie de la zero singur și să creez o altă bicicletă și nu prea am timp pentru asta. Dar, pe de altă parte, acest slider JavaScript este o oportunitate excelentă de a practica dezvoltarea prin refactorizarea codului său și implementarea de noi funcții interesante care ar putea să nu existe încă.
Deci, dacă, ca mine, aveți nevoie de o bază de cod pentru experimente și aveți cel puțin ceva timp liber suplimentar, copiați codul slider-ului JavaScript pe care l-am descris sau alăturați-vă colaboratorilor de pe GitHub. Depozitul este deschis și am oferit un link către el la începutul articolului.
Dacă doriți să vă îmbunătățiți abilitățile de front-end cu privire la creația mea, vă pot oferi chiar și o mică listă de editări și îmbunătățiri de care are nevoie codul și care ar putea fi de interes pentru dvs. în ceea ce privește implementarea lor:
Lista de editări pe care am dat-o nu este, desigur, definitivă și poate fi completată. Scrieți despre sugestiile, gândurile și dorințele dvs. în comentariile de mai jos articol și împărtășiți-le prietenilor prin rețelele de socializare pentru a-i implica și pe aceștia în dezvoltare.
Vă rog să nu judecați codul meu cu strictețe, pentru că, așa cum am spus deja, nu mă consider un specialist Frontend și nu sunt. De asemenea, sunt deschis la toate comentariile tale despre stilul de codare și sper că pot învăța ceva de la tine și tu de la mine, de exemplu. îndeplini scopul principal de a dezvolta și susține produse OpenSource.
Alăturați-vă comunităților de proiect, abonați-vă la actualizări și chiar mă puteți ajuta financiar folosind formularul de sub articol în sine, dacă am putut să vă ajut cu ceva sau pur și simplu vă place ceea ce fac :)
Atât am vrut să spun! Toate cele bune! 🙂
P.S. : dacă aveți nevoie de un site web sau trebuie să faceți modificări unuia existent, dar nu există timp sau dorință pentru asta, îmi pot oferi serviciile.
Peste 5 ani de experiență în dezvoltarea profesională a site-urilor web. Lucrul cu PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular și alte tehnologii de dezvoltare web.
Experienta in dezvoltarea de proiecte la diferite niveluri: landing pages, site-uri corporative, magazine online, CRM, portaluri. Inclusiv suport și dezvoltare de proiecte HighLoad. Trimiteți aplicațiile prin e-mail [email protected].
