Realizarea unui slider JavaScript cu propriile noastre mâini. Glisor personalizat pentru imagine jQuery

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. În timp ce jQuery a făcut JavaScript mult mai ușor de lucrat, 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 în concordanță cu obiectivele site-ului nostru.

Pentru alte glisoare, trebuie doar să adăugați titluri, imagini și să selectați efectele de tranziție a diapozitivelor care vin cu glisorul. Toate aceste plugin-uri sunt bine documentate, așa că adăugarea de noi efecte sau caracteristici la ele este ușoară. Puteți chiar să schimbați declanșatoarele bazate pe evenimente dacă sunteți un programator jQuery experimentat.

Cele mai recente tendințe precum 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ă.

Glisoare de imagine JQuery

Jssor Responsive Slider

Recent, am dat peste acest slider jQuery funcțional și am putut să văd direct că își face treaba foarte bine. Conține posibilități nesfârșite care pot fi extinse prin codul slider open source:

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

Demo | Descarca

PgwSlider este un glisor receptiv bazat pe JQuery / Zepto

Singurul scop al acestui plugin este de a arăta prezentări de imagini. Este foarte compact, deoarece fișierele jQuery au o dimensiune de doar 2,5 KB, ceea ce îl face foarte rapid de încărcat:

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

Demo | Descarca

Slider Jquery Vertical News

Un slider jQuery flexibil și util, conceput pentru resurse de știri, cu o listă de postări în partea stângă și o imagine în dreapta:

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

Demo | Descarca

Glisorul Wallop

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 receptiv;
• Design simplu;
• Diverse opțiuni pentru schimbarea diapozitivelor;
• Cod JavaScript minim;
• Dimensiunea este de numai 3KB.

Demo | Descarca

Galerie Polaroid în stil plat

O galerie în stil document, 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:

• Glisor receptiv;
• Design plat;
• Schimbarea aleatorie a diapozitivelor;
• Acces complet la codul sursă.

Demo | Descarca

A-Slider

Demo | Descarca

HiSlider - Slider pentru imagini HTML5, jQuery și WordPress

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

• Glisor receptiv;
• Nu sunt necesare cunoștințe de programare;
• Mai multe șabloane și skinuri minunate;
• Efecte frumoase de tranziție;
• Suport pentru diferite platforme;
• Compatibil cu WordPress, Joomla, Drupal;
• Abilitatea de a afișa conținut de diferite tipuri: imagini, videoclipuri YouTube și videoclipuri Vimeo;
• Personalizare flexibilă;
• Funcții suplimentare utile;
• Conținut nelimitat afișat.

Demo | Descărcare

Wow slider

WOW Slider este un slider de imagine jQuery receptiv, cu imagini uimitoare ( domino, întoarce, estompează, flip și flash, zboară afară, 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ă parcurgeți codul sau să editați imagini. Versiunile de plugin pentru Joomla și WordPress sunt, de asemenea, disponibile pentru descărcare:

• Pe deplin receptiv
• Suport pentru toate browserele și toate tipurile de dispozitive;
• Suport pentru dispozitive tactile;
• Instalare ușoară pe WordPress;
• Flexibilitate în personalizare;
• 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:

• Este necesar JQuery 1.7 sau o versiune superioară;
• Efecte frumoase de tranziție;
• Simplu și flexibil de personalizat;
• Compact și adaptabil;
• 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 diverse efecte de animație. Dezvoltatorii au încercat să implementeze acest concept, ținând cont de cerințele minime pentru crearea unui design simplu pentru un magazin online, în care elementele „flying out” reprezintă diferite categorii:

• Aspect receptiv;
• Design minimalist;
• Diverse efecte ale căderii și schimbării toboganelor.

Demo | Descărcare

Slider imagine jQuery la dimensiune completă

Un glisor foarte simplu care ocupă 100% din lățimea paginii și se ajustează la dimensiunea ecranelor dispozitivelor mobile. Funcționează cu tranziții CSS, iar imaginile sunt „stivuite” cu ancore. Ancora poate fi înlocuită sau eliminată dacă nu doriți să legaț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 diapozitive:

• Slider jQuery receptiv;
• Full-size;
• 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 ajustează lățimea și înălțimea pentru a se potrivi cu containerul părinte.

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

• Design adaptiv;
• Derularea prin clic de mouse.

Demo | Descărcare

Glisor gratuit pentru stiva 3D

Un glisor experimental care răsfoiește imaginile în 3D. Două teancuri seamănă cu teancuri de hârtie, din care, la derulare, imaginile sunt afișate în centrul glisorului:

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

Demo | Descărcare

Slider cu fantă pe ecran complet alimentat de JQuery și tutorial 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 în timp ce deschideți imaginea următoare sau anterioară. Folosind jQuery și animația CSS, putem crea efecte de tranziție unice:

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

Demo | Descărcare

Unislider este un slider jQuery foarte mic

Fără clopote și fluiere inutile, dimensiunea este mai mică de 3KB. Utilizați orice HTML pentru diapozitive, extindeți-l cu CSS. Tot ceea 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

Diapozitive sensibile minime

Plugin simplu și compact ( dimensiunea este de doar 1 Kb), care creează un glisor receptiv folosind elemente din interiorul unui container. ResponsiveSLides.js funcționează cu o mare varietate de browsere, inclusiv toate versiunile 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 o listă 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, 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, un plugin jQuery receptiv

SlidesJS este un plugin jQuery receptiv (1.7.1 și versiuni ulterioare) cu suport pentru tranziții tactile și CSS3. Experimentați cu el, încercați câteva exemple gata făcute pentru a vă 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ă a diapozitivelor;
• Slide-urile pot conține imagini, videoclipuri sau conținut HTML;
• Suport extins pentru dispozitive tactile;
• Utilizarea tranzițiilor CSS pentru animațiile de diapozitive ( 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. Noua versiune a fost îmbunătățită pentru a crește viteza de lucru, compactitatea.

Demo | Descarca

Galleria - galerie foto receptivă bazată pe JavaScript

Galleria este folosită de milioane de site-uri pentru a crea galerii de imagini de înaltă calitate. Numărul de recenzii pozitive despre munca ei doar trece:

• Complet gratuit;
• Vizualizare pe tot ecranul;
• 100% receptiv;
• 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 este un simplu glisor de imagine jQuery receptiv

Prezentarea unui slider de imagine jQuery scris special pentru design web receptiv. 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 receptiv;
• Prezentări.

Demo | Descarca

JQuery Popeye 2.1

Sunt utilizate elementele standard ale primei versiuni a programului: glisorul dispare la stânga și plutește spre dreapta. Aceeași navigare și subtitrări care apar la trecerea cursorului:

• Design adaptiv;
• Suport pentru semnături;
• Modul prezentare de diapozitive.

Demo | Descarca

1. Excelent prezentare jQuery

O prezentare mare de diapozitive eficientă folosind tehnologii jQuery.

2. Plugin jQuery „Scale Carusel”

Prezentare scalabilă folosind jQuery. Veți putea seta dimensiunile pentru prezentarea de diapozitive care vi se potrivesc cel mai bine.

3. Plugin 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. Există o schimbare automată a diapozitivelor.

7. Pluginul jQuery „Parallax Slider”

Glisor cu efect de fundal 3D. Punctul culminant al acestui glisor este mișcarea de fundal, care este compusă din mai multe straturi, fiecare derulând cu o viteză diferită. Rezultatul este o imitare 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, în secțiunea „exemple”, puteți găsi link-uri către toate cazurile de utilizare posibile pentru acest plugin.

9.jQuery Image Slider, plugin „slideJS”.

Glisorul elegant jQuery va putea cu siguranță să vă decoreze proiectul.

10. Expunere de diapozitive pentru plug-in jQuery „Easy Slides” v1.1

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

11. Plugin „jQuery Slidy”

Plugin jQuery ușor în diferite modele. Există o schimbare automată a diapozitivelor.

12.jQuery galerie CSS cu schimbător automat de diapozitive

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

13. jQuery Nivo Slider

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

14. Slider jQuery „MobilySlider”.

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

15. Plugin jQuery Slider²

Glisor ușor cu schimbare automată a glisierei.

16. Slider javascript proaspăt

Glisor cu schimbare automată a imaginii.

Plugin pentru implementarea prezentării de diapozitive cu schimbare automată a diapozitivelor. Este posibil să controlați afișajul folosind imagini în miniatură.

Slider de imagine CSS jQuery folosind pluginul NivoSlider.

19. Slider jQuery „jShowOff”.

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

20. Plugin „Portofoliul efectului de declanșare”

Plugin jQuery proaspăt pentru portofolii de fotografie. 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 de-a lungul circumferinței glisorului sub forma unui cerc roșu. Se va potrivi perfect în site-ul dvs. dacă utilizați elemente rotunde în design.

23. Slider imagine jQuery

Kit glisor ușor. Glisorul este prezentat în diferite versiuni: verticală și orizontală. De asemenea, sunt implementate diverse tipuri de navigare între imagini: folosind butoanele „Înainte” și „Înapoi”, folosind rotița mouse-ului, folosind un clic de mouse pe un slide.

24. Galerie cu miniaturi „Kit Slider”

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

25. Slider de conținut jQuery Slider Kit

Slider de conținut vertical și orizontal JQuery.

26. Prezentare de diapozitive jQuery Slider Kit

Prezentare de diapozitive cu schimbare automată a diapozitivelor.

27. Glisor CSS3 javascript profesional ușor

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

jQuery miniatură prezentare.

29. O prezentare jQuery simplă

Prezentare de diapozitive cu butoane de navigare.

30. Awesome jQuery „Skitter” slideshow

Pluginul jQuery „Skitter” pentru a crea prezentări de diapozitive uimitoare. Pluginul acceptă 22 (!) feluri de efecte de animație diferite la schimbarea imaginilor. Poate funcționa cu două opțiuni de navigare în diapozitive: numere de diapozitive și 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ă. Sub formă de diapozitive pot fi: imagini simple, imagini cu legendă, imagini cu tooltips, clipuri video. Puteți naviga folosind săgețile, linkurile cu numărul de diapozitive și tastele stânga/dreapta de pe tastatură. Slideshow-ul este realizat în mai multe versiuni: cu și fără miniaturi. Pentru a vedea toate opțiunile, urmați linkurile Demo # 1 - Demo # 6 aflate în partea de sus a paginii demo.

Design foarte original al glisorului de imagine, care amintește de un ventilator. Schimbarea diapozitivelor animate. Navigarea între imagini se realizează cu ajutorul săgeților. Există, de asemenea, o schimbare automată, care poate fi activată și oprită folosind butonul Redare/Pauză situat în partea de sus.

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

34. Slider „Flux Slider” în jQuery și CSS3

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

35. Plugin jQuery jSwitch

Galerie animată jQuery.

Prezentare ușoară în jQuery 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. jQuery Sudo Slider

Glisor de imagine ușor în jQuery. Există o mulțime de opțiuni de implementare: schimbarea imaginii pe orizontală și verticală, cu și fără referințe la numărul diapozitivului, cu și fără legende de imagine, diverse efecte de schimbare a imaginii. Există o funcție de schimbare automată a diapozitivei. Link-uri către toate exemplele de implementare pot fi găsite pe pagina demo.

39. jQuery CSS3 Slideshow

Prezentarea de diapozitive în miniatură acceptă modul de schimbare automată a diapozitivelor.

40. Slider jQuery Flux

Glisor cu multe efecte pentru schimbarea imaginilor.

41. Glisor jQuery simplu

Glisor elegant pentru imagine jQuery.

42. „Craftyslide” jQuery slideshow

43. Expunere de diapozitive pe ecran complet jQuery

Expunere de diapozitive jQuery HTML5 la lățime completă cu coloană sonoră.

O simplă prezentare de diapozitive jQuery.

Timpul nu stă pe loc și odată cu el progresează. Acest lucru a afectat și vastitatea internetului. Puteți vedea deja cum se schimbă aspectul site-urilor, designul responsive este deosebit de popular. Și în acest sens, au apărut destul de multe noi. glisoare jquery receptive, galerii, carusele sau pluginuri similare.
1. Slider pentru postări orizontale receptive

Carusel orizontal adaptiv cu instrucțiuni detaliate de instalare. Este realizat într-un stil simplu, dar îl puteți aranja după cum doriți.

2. Glisor pe Glide.js

Acest glisor este potrivit pentru orice site. Utilizează Glide.js open source. Culorile cursorului pot fi schimbate cu ușurință.

3. Prezentare de diapozitive de conținut înclinat

Glisor de conținut receptiv. Punctul culminant al acestui glisor este efectul 3D al imaginilor, precum și diferite animații de apariție în ordine aleatorie.

4. Glisor folosind pânza HTML5

Slider foarte frumos și impresionant cu particule interactive. Este executat folosind canvas HTML5,

5. Glisor „Imagini transformate”

Glisor cu efect de morphing (Transformare lină de la un obiect la altul). În acest exemplu, glisorul funcționează bine pentru portofoliul unui dezvoltator web sau un studio web ca portofoliu.

6. Glisor circular

Un glisor sub formă de cerc cu efect de răsturnare.

7. Glisor pentru fundal neclar

Glisor adaptiv cu comutare și estompează fundalul.

8. Glisor de modă adaptiv

Glisor pentru site-ul web simplu, ușor și receptiv.

9. Slicebox - glisor de imagine 3D jQuery(ACTUALIZAT)

Versiune actualizată a glisorului Slicebox cu remedieri și funcții noi.

10.Grilă de imagini responsive animate gratuite

Un plugin jQuery pentru crearea unei grile de imagini flexibile care va schimba fotografiile folosind diferite animații și timpi. Acesta poate funcționa bine ca fundal sau element decorativ pe site, deoarece putem personaliza aspectul noilor imagini și tranzițiile acestora. Plugin-ul este realizat în mai multe versiuni.

11. Flexslider

Plugin universal gratuit pentru site-ul dvs. Acest plugin vine cu mai multe opțiuni de glisare și carusel.

12. Rama foto

Fotorama este un plugin versatil. Are o mulțime de setări, totul funcționează rapid și ușor, există posibilitatea de a vizualiza diapozitive pe tot ecranul. Glisorul poate fi folosit atât la dimensiune fixă, cât și la responsive, cu sau fără miniaturi, cu sau fără defilare circulară și multe altele.

P.S.Am pus cursorul de mai multe ori si cred ca este unul dintre cele mai bune

13. Slider galerie 3D gratuit și receptiv cu miniaturi.

Glisor pentru galerie experimentală 3DPanelLayout cu plasă și efecte de animație interesante.

14. Glisor pe css3

Glisorul receptiv este realizat în CSS3, cu un flux de conținut fluid și animație ușoară.

15. Slider WOW

Wow slider este un glisor de imagine cu imagini uimitoare.

17. Elastic

Glisor elastic complet receptiv cu miniaturi de diapozitiv.

18. Slit

Este un glisor receptiv pe ecran complet care utilizează animație CSS3. Glisorul este realizat în două versiuni. animația este destul de neobișnuită și frumoasă.

19.Galerie foto adaptativă plus

O simplă galerie de glisare gratuită cu imagini încărcate.

20. Slider responsive pentru WordPress

Slider gratuit receptiv pentru WP.

21. Parallax Content Slider

Slider cu efect de paralaxă și control al fiecărui element cu CSS3.

22. Glisor cu muzică de legătură

Slider folosind JPlayer cu sursă deschisă. Acest glisor seamănă cu o prezentare cu muzică.

23. Slider cu jmpress.js

Glisorul receptiv se bazează pe jmpress.js și, prin urmare, vă permite să utilizați niște efecte 3D interesante pe diapozitive.

24. Prezentare rapidă de diapozitive

Prezentare de diapozitive cu comutare rapidă a diapozitivelor. Comutator de diapozitive la hover.

25. Image Accordion cu CSS3

Acordeon de imagini folosind css3.

26. Un plugin pentru galerie optimizat la atingere

Este o galerie receptivă care este optimizată pentru dispozitive tactile.

27.3D Galerie

Galeria de perete 3D- creat pentru browserul Safari, unde efectul 3D va fi vizibil. Vizualizată într-un browser diferit, funcționalitatea va fi bună, dar efectul 3D nu va fi vizibil.

28. Glisor de paginare

Glisor de paginare receptiv cu glisorul jQuery UI. ideea este de a folosi un concept simplu de navigare. Este posibil să derulați înapoi toate imaginile sau diapozitiv cu diapozitiv.

29.Montaj de imagine cu jQuery

Poziționarea automată a imaginilor în funcție de lățimea ecranului. Un lucru foarte util atunci când dezvoltați un site de portofoliu.

Galeria 30.3D

Glisor circular 3D simplu în css3 și jQuery.

31. Modul ecran complet cu efect 3D pe css3 și jQuery

Glisor pe ecran complet cu tranziție frumoasă.

Una dintre cele mai mari provocări cu care se confruntă civilizația occidentală în acest moment este cum să afișați o mulțime de conținut într-un spațiu mic.

O soluție eficientă este plasarea conținutului în blocuri secvențiale folosind ceea ce este cunoscut în industrie ( și în comunitatea online) numit slider de conținut. Poate că nu ai auzit de el, dar pun pariu că cu siguranță ar fi trebuit să-l vezi.

Pentru a vă reîmprospăta memoria și a vă oferi o idee despre ceea ce vom crea, mai jos este exemplu de glisor de conținut:

În acest articol, vă voi arăta cum să vă creați propriul slider de conținut frumos, care seamănă mult cu acesta. Pe lângă doar crearea unui glisor de conținut, veți învăța multe despre cum interacționează HTML, CSS și JavaScript pentru a crea un astfel de element. În general, te așteaptă o mulțime de lucruri noi, așa că hai să începem.

O privire de ansamblu asupra modului în care funcționează

Înainte de a ne arunca cu capul în HTML, CSS și JavaScript care vor fi necesare pentru ca toate acestea să funcționeze, să facem un mic pas înapoi și să înțelegem elementele care compun glisorul nostru de conținut.

În primul rând, avem conținutul pe care vrem să-l împingem în glisor:

Conținutul poate fi orice doriți. Acestea pot fi imagini, conținut HTML standard, o combinație de mai multe tipuri de conținut etc. Chiar nu contează. Dacă conținutul nostru poate fi împachetat în elemente DIV, este în regulă. Trebuie doar să vă asigurați că fiecare bloc de conținut are aceeași lățime și înălțime.

Când vizualizați glisorul, vedeți doar un bloc de conținut odată. Dacă nu faceți pași suplimentari, atunci conținutul afișat în același timp în dimensiunea sa originală poate transforma glisorul în ceva foarte neatractiv din punct de vedere vizual.

Vom rezolva acest lucru în doi pași. Mai întâi, vom împacheta conținutul într-un container care are aceeași dimensiune cu unul dintre blocurile de conținut:

După ce am împachetat conținutul într-un container, tăiem toate elementele din jurul blocului de conținut pentru a ne asigura că este afișat un singur bloc odată:

Următorul pas este să poți vizualiza restul conținutului. Acest lucru se poate face într-o varietate de moduri. În acest articol, folosim un set de link-uri circulare pe care le puteți face clic:

Ultimul lucru de făcut pentru ca glisorul să funcționeze este să faceți clic pe fiecare link. Acest lucru va necesita niște trucuri CSS împreună cu JavaScript, dar nimic prea complicat. Și aceasta, dragii mei prieteni și dușmani, și întreaga scurtă prezentare a din ce este făcut un slider de conținut.

În următoarele câteva secțiuni, ne vom uita la codurile HTML, CSS și JavaScript reale care vor alimenta glisorul nostru.

Conţinut

Să urmăm aceiași pași pe care i-am parcurs în prezentarea generală rapidă și să începem cu... conținut. În primul rând, trebuie să creăm un punct de plecare. Să creăm un document HTML gol și să adăugăm următorul cod din șablonul HTML5 de pornire:

Acest marcaj nu face altceva decât să definească structura documentului, dar este primul pas pentru a adăuga conținutul nostru în continuare. Să facem asta în secțiunea următoare.

Continut ( de data asta real)

În interiorul elementului body, adăugați următorul cod HTML:

Între etichetele de stil, adăugați următoarele reguli de stil care definesc forma și culoarea conținutului nostru:

#wrapper (lățime: 2200px; poziție: relativ; stânga: 0px;) .conținut (float: stânga; lățime: 550px; înălțime: 350px; spațiu alb: normal; background-repeat: fără repetare;) #itemOne (fundal) -culoare: # ADFF2F; imagine de fundal: url ("http://www.kirupa.com/images/blueSquare.png");) #itemTwo (culoare de fundal: # FF7F50; imagine de fundal: url ("http : //www.kirupa.com/images/yellowSquare.png ");) #itemThree (culoare de fundal: # 1E90FF; imagine de fundal: url (" http://www.kirupa.com/images/pinkSquare.png ");) #itemFour (culoare de fundal: # DC143C; imagine de fundal: url (" http://www.kirupa.com/images/graySquare.png ");)

Acum, când vizualizați pagina, veți vedea ceva similar cu ceea ce este afișat în captură de ecran:

Veți vedea patru blocuri dreptunghiulare mari aranjate îngrijit unul lângă altul. În funcție de rezoluția ecranului și de dimensiunea ferestrei browserului, poate fi necesar să derulați puțin la dreapta sau la stânga pentru a vedea toate dreptunghiurile.

Acum acordă puțină atenție și încearcă să înțelegi de ce vezi ceea ce vezi. Examinați marcajul HTML și explorați elementele care se află în documentul dvs.

Acordați atenție clasei și valorilor id care sunt folosite în ea, deoarece acestea vor respecta regulile stilului pe care l-ați adăugat. Priviți regulile de stil și modul în care redarea lor afectează rezultatul. Acum să recapitulăm totul.

Ce am făcut

În marcajul nostru HTML, conținutul pe care îl vedeți este format din patru div-uri, fiecare conținând o valoare din clasa de conținut. Această valoare de clasă provine din regula stilului .content, care determină dimensiunea fiecărui bloc: 550 pixeli lățime pe 350 pixeli înălțime:

Conținut (float: stânga; lățime: 550px; înălțime: 350px; spațiu alb: normal; fundal-repeat: fără repetare;)

Regula stilului .content setează, de asemenea, float-ul la stânga. Acest lucru face ca div-urile să se alinieze. Ultimul lucru pe care îl declară această regulă de stil este proprietatea spațiu alb. Această proprietate determină modul în care va fi împachetat textul din paragraf.

Am aplicat această proprietate doar pentru comoditate. Dacă decideți să depășiți domeniul de aplicare al acestui articol și să adăugați conținut pentru fiecare dintre div-uri, îmi veți fi recunoscători doar pentru că textul dvs. va fi împachetat corespunzător sau eliminați acea proprietate ( sau setați-o la o altă valoare) dacă nu vrei să-l vezi.

În acest moment, elementul nostru div a fost dimensionat și aliniat corespunzător. Păcat că este complet invizibil:

Pentru a rezolva această problemă, atribuim fiecărui div un ID unic prin intermediul valorilor id: itemOne, itemTwo, itemThree și itemFour. În secțiunea de stiluri, avem patru reguli de stil care corespund acestor valori de id:

#itemOne (culoare de fundal: # 0099CC; imagine de fundal: url ("http://www.kirupa.com/images/blueSquare.png");) #itemTwo (culoare de fundal: # FFCC00; imagine de fundal: url ("http://www.kirupa.com/images/yellowSquare.png");) #itemThree (culoarea fundalului: # FF6666; imaginea de fundal: url ("http://www.kirupa.com/images") /pinkSquare.png ");) #itemFour (culoarea fundalului: # E8E8E8; imaginea de fundal: url (" http://www.kirupa.com/images/graySquare.png ");)

După cum puteți vedea, aceste reguli de stil definesc doar culoarea de fundal și imaginea de fundal pentru conținutul nostru. De acum înainte, div-urile nu mai sunt invizibile. Acestea sunt afișate ca dreptunghiuri de culori diferite, cu o dimensiune de 550 x 350 pixeli.

Aproape am terminat. Ultimul lucru la care ne vom uita este div-ul misterios care conține ID-ul wrapper-ului:

Acest element împachetează tot conținutul nostru într-un singur container. Acesta nu este containerul pe care l-am avut în vedere în recenzie când am vorbit despre tăierea întregului conținut în jurul blocurilor de conținut.

Acest recipient este conceput pentru lucruri puțin diferite. Literal, pur și simplu împachetează conținutul, astfel încât să putem vedea tot.

Regula de stil corespunzătoare #wrapper îndeplinește această sarcină:

#wrapper (lățime: 2200px; poziție: relativ; stânga: 0px;)

În primul rând, această regulă de stil specifică lățimea elementului plic să fie de 2200 de pixeli. Adică lățimea totală a conținutului nostru... pe care o obțineți prin înmulțirea cu 4 ( după numărul de div) cu 550 pixeli.

Poziția și proprietățile din stânga sunt menite să stabilească capacitatea de a muta containerul oriunde dorim. Prin setarea proprietății de poziție la relativă, eliminăm acest element din structura standard a documentului și facem posibilă plasarea lui oriunde folosind valori de pixeli în raport cu locul în care se află în prezent.

Deoarece div-urile noastre de conținut sunt copii ale acestui div, ele sunt trase până acolo unde este plasat div-ul părinte. După cum vă puteți imagina, acest lucru este foarte convenabil!

Tăierea conținutului

În secțiunea anterioară, ne-am ocupat să facem ca blocurile de conținut să fie afișate. Următorul lucru pe care îl vom face este să ne decupăm conținutul, astfel încât să fie vizibil doar un singur bloc de glisare la un moment dat.

Aici avem nevoie de containerul principal. Înfășurați toate div-urile HTML într-un div cu id-ul contentContainer:

Doar adăugați două linii noi și, dacă doriți, linii indentate, care sunt doar pentru stilul codului HTML așa cum arată.

Chiar acum, dacă răsfoiți conținutul nostru împachetat (din nou), nu veți vedea nimic nou. Doar împachetarea elementelor într-un alt div nu face nimic prea mult, cu atât mai puțin ceea ce vrem să facem pentru a tăia conținutul.

Pentru a adăuga această acțiune semnificativă, creați următoarea regulă de stil #contentContainer:

#contentContainer (lățime: 550px; înălțime: 350px; chenar: 5px negru solid; overflow: ascuns;)

Observați că setați dimensiunea elementului contentContainer la 550 de pixeli pe 350 de pixeli. Adică, exact aceeași dimensiune ca fiecare dintre blocurile de conținut. Pentru a face glisorul să iasă puțin în evidență, îl setăm la un chenar negru de 5px.

Ultimul lucru pe care îl facem este să decupăm conținutul setând proprietatea de overflow la ascuns. Acest lucru este pentru a ascunde totul în afara conținutului container.

Toate împreună ne oferă următoarea imagine în browser:

Rețineți că numai conținutul primului bloc este vizibil acum. Restul conținutului încă există, este doar ascuns acum datorită tăierii noastre prin valoarea ascunsă a proprietății overflow.

Legături de navigare

Așa că am ajuns la ei! Ne apropiem de obținerea unui glisor complet funcțional. În această secțiune, vom aborda link-urile de navigare - elemente pe care faceți clic pentru a vedea alte blocuri de conținut.

Aceste link-uri nu au nimic de-a face cu conținutul nostru sau cu orice altă parte a HTML-ului pe care îl avem deja. Trebuie să adăugați liniile evidențiate la HTML-ul pe care îl avem deja (dar deasupra etichetei de script):

Să aruncăm o privire rapidă la codul HTML pe care tocmai l-ați adăugat. În primul rând, avem un div numit navLinks care descrie o listă neordonată. Legăturile în sine sunt prezentate ca elemente de listă.

Fiecare element din listă conține o valoare din clasa itemLinks, precum și un atribut personalizat de date * numit data-pos. Vom reveni la acest atribut puțin mai târziu, dar deocamdată, rețineți că există.

Trebuie să stilăm HTML-ul pe care tocmai l-am adăugat. În secțiunea de stiluri, adăugați următoarele reguli:

#navLinks (text-align: center; width: 550px;) #navLinks ul (marja: 0px; padding: 0px; display: inline-block; margin-top: 6px;) #navLinks ul li (float: left; text- aliniere: centru; margine: 10px; stil listă: niciunul; cursor: indicator; culoare de fundal: #CCCCCC; umplutură: 5px; rază chenar: 50%; chenar: negru 5px solid;) #navLinks ul li: hover ( culoare de fundal: # FFFF00;) #navLinks ul li.active (culoare de fundal: # 333333; culoare: #FFFFFF; lățime de contur: 7px;) #navLinks ul li.active: hover (culoare de fundal: # 484848; culoare: #FFFFFF;)

Uau, cât CSS. În ciuda faptului că există o mulțime de cod, nu este nimic cu adevărat unic sau interesant în el. O parte a codului CSS creează un meniu orizontal cu linkuri afișate una lângă alta.

Restul codului determină aspectul fiecărui link, precum și selecția corespunzătoare la trecerea mouse-ului.
Merită încă să ne oprim asupra unui punct mai detaliat.

Acest lucru se datorează a două reguli de stil care se aplică clasei active:

#navLinks ul li.active (culoare fundal: # 333333; culoare: #FFFFFF; lățime contur: 7px;) #navLinks ul li.active: hover (culoare fundal: # 484848; culoare: #FFFFFF;)

Dacă vă amintiți, nu exista niciun element în codul nostru HTML care să aibă valoarea clasei active. Indiferent, aceste reguli de stil vor fi în continuare aplicate, deoarece clasa activă este adăugată dinamic de unul dintre linkurile noastre.

Dacă vă este greu să vă dați seama acum, nu vă faceți griji, îl vom analiza în detaliu foarte curând.

În acest moment, glisorul nostru arată astfel:

Dacă glisorul dvs. nu arată corect, atunci există o mare probabilitate să fi greșit... sau altceva. Asta sa întâmplat?

Crearea cursorului în sine

Bine, deocamdată avem ceva care seamănă mult cu un glisor funcțional. Cu toate acestea, când faceți clic pe oricare dintre linkuri, nu se întâmplă absolut nimic.

Să creăm un glisor de lucru acum, dar înainte de asta vom adăuga JavaScript și câteva elemente interesante... și anume tranziții CSS frumoase.

Adăugarea JavaScript

În interiorul etichetei de script, adăugați următoarele rânduri de cod JavaScript:

// doar interogând DOM... ca și cum ai cere permisiunea șefului! var links = document.querySelectorAll (". itemLinks"); var wrapper = document.querySelector ("# wrapper"); // activeLink furnizează o etichetă pentru elementul activ var activeLink = 0; // configurați urmărirea evenimentelor pentru (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }

Tot ce trebuie să facem este să oferim o tranziție lină în loc de schimbări bruște de diapozitive.

Adăugarea unei tranziții

În prezent, avem un glisor de conținut care nu derulează încă ușor conținutul. În schimb, toboganele sar brusc de la una la alta. Pentru a face defilarea fluidă a conținutului, să folosim o tranziție CSS. Să adăugăm una dintre posibilele tranziții la glisorul nostru.

Găsiți regula stilului #wrapper și adăugați-i o linie:

Linia pe care ați adăugat-o definește tranziția. Proprietatea specificată în acesta determină că tranziția ar trebui să aibă loc atunci când proprietatea din stânga se schimbă. Tranziția noastră va dura 0,5 secunde și va folosi funcția de sincronizare ease-in-out pentru a accelera tranziția la începutul tranziției și a încetini la sfârșit.

Deoarece proprietatea de tranziție este încă supusă unor modificări în W3C, va trebui să utilizați prefixe pentru a vă asigura că orice browser modern poate aplica tranziția. Dacă nu doriți să vă ocupați de acest lucru, adăugați următorul script chiar înainte de eticheta de script:

Nu, acest script nu face nimic rău intenționat. Aceasta este versiunea găzduită Biblioteci Lei Veru -fara prefix... Pentru a nu afla o grămadă de tot despre cum funcționează glisoarele, puteți, de asemenea, să descărcați scriptul ei, să îl încărcați pe propriul dvs. server și să faceți link la propria versiune.

Oricum, dacă în prezent vizualizați documentul, ar trebui să aveți un glisor de conținut funcțional care afișează fără probleme conținutul atunci când faceți clic pe oricare dintre linkurile de navigare. Acest lucru ar trebui să fie identic cu ceea ce ați văzut în exemplul postat chiar la începutul acestui articol.

In cele din urma!!!

Analizând codul (și orice altceva!)

Acum că avem un glisor de conținut funcțional, să încercăm să ne dăm seama de la început cum leagă codul totul.

Ce se întâmplă cu adevărat

După încărcarea glisorului de conținut, puteți vedea cum este afișat primul bloc de conținut. Restul conținutului este tăiat și ascuns vederii:

Făcând clic pe orice link, se afișează blocul de conținut corespunzător. Glisorul știe ce parte a conținutului trebuie afișată în zona vizibilă datorită relației strânse dintre fiecare link de navigare și poziția în pixeli a fiecărui bloc de conținut.

Să încercăm să înțelegem această legătură. Sunt mai multe lucruri pe care le știm. Știm că fiecare dintre blocurile noastre de conținut are o lățime de 550 de pixeli. De asemenea, știm că primul nostru bloc de conținut este setat orizontal la 0 pixeli.

De unde știm asta? Toate blocurile noastre de conținut sunt împachetate într-un element wrapper care se întinde pe tot conținutul nostru, iar marginea din stânga a elementului wrapper este la 0 pixeli:

Acest lucru este declarat în regula stilului #wrapper. Din această regulă de stil, știm, de asemenea, că toate blocurile de conținut sunt deplasate la stânga și aranjate într-un rând unul după altul.

Știind acest lucru, putem calcula pozițiile pentru toate blocurile de conținut după cum urmează:

Primul bloc este situat în punctul 0 pixel. Lățimea primului bloc de conținut este poziția celui de-al doilea bloc. Adică 550 de pixeli. Fiecare bloc următor are o poziție cu 550 de pixeli mai mare decât cea precedentă.

Deoarece știm poziția exactă a pixelilor fiecărui bloc de conținut, putem folosi aceste informații pentru a spune glisorului de conținut să mute elementul de înveliș în locația dorită, astfel încât conținutul pe care îl dorim să fie vizibil.

Data-poz!

Grozav, acum știm pozițiile tuturor blocurilor de conținut. Ceea ce nu am luat în considerare încă este modul în care cunoașterea poziției blocului de conținut în pixeli ne va ajuta să afișăm blocul dorit în fereastra glisor.

Cum putem indica că atunci când se face clic pe un link, un anumit bloc de conținut ar trebui să fie afișat? Doar. Fiecare link conține poziția exactă (în pixeli) a blocului de conținut căruia îi corespunde:

Rețineți că atributul data-pos indică fiecare dintre legăturile către valoarea fiecăruia dintre atributele data-pos. Ele sunt egale cu valoarea negativă a poziției orizontale inițiale a fiecăruia dintre blocurile de conținut.

Când facem clic pe un link, JavaScript este folosit pentru a citi atributul data-pos asociat cu acest link și apoi pentru a comuta valoarea poziției pixelului pentru elementul nostru wrapper la valoarea care a fost citită din atribut.

De exemplu, iată ce se întâmplă după ce faceți clic pe al treilea link:

Al treilea link are o valoare data-pos de 1100 pixeli. Aceasta corespunde câți pixeli trebuie mutat ambalajul containerului pentru ca al treilea bloc de conținut să apară în zona vizibilă. Făcând clic pe orice alt link, se va seta proprietatea elementului wrapper la valoarea conținută în atributul data-pos al acelui link.

Bine, ne-am dat seama care este relația dintre link-uri și poziția conținutului despre care am vorbit mai devreme. Acum trebuie doar să luăm în considerare JavaScript, care transformă tot ce am scris în această secțiune în ceva pe care browserul îl va înțelege.

Totul este despre JavaScript

Deoarece acum aveți o înțelegere conceptuală a modului în care funcționează totul în glisorul nostru de conținut, să aruncăm o privire la JavaScript care implementează tot ceea ce știți. Așa cum fac în toate articolele mele, să defalcăm fiecare linie JavaScript și să vedem ce face pentru glisorul nostru.

Să începem chiar de sus:

var links = document.querySelectorAll (". itemLinks"); var wrapper = document.querySelector ("# wrapper");

Variabila links preia un set de toate elementele din documentul nostru care au o valoare în clasa itemLinks. Aceste articole sunt elemente de listă care acționează ca linkuri de navigare. Variabila wrapper este foarte asemănătoare cu link-urile. Este nevoie de un indicator către înveliș.

querySelector și querySelectorAll

Observați cum interog DOM. În loc să folosesc ceva de genul getElementsByClassName sau getElementById, folosesc noile funcții querySelectorAll și querySelector.

Veți vedea că vom folosi ambele variabile mai târziu, așa că țineți cont de ele.

var activeLink = 0;

Variabila activeLink este utilizată pentru a stoca poziția conținutului care este afișat în prezent. Veți înțelege mai bine semnificația acestei variabile când o voi explica în acțiune puțin mai târziu.

Următorul set de linii este o buclă for:

// configurați urmărirea evenimentelor pentru (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }

Aici repetăm ​​fiecare element al variabilelor link-urilor și îi atribuim urmărirea evenimentelor. Acest instrument de urmărire a evenimentelor va apela funcția setClickedItem atunci când a fost capturat un eveniment de clic.

Următoarea linie provoacă o serie întreagă de modificări:

// setați primul element ca links activ.classList.add ("activ");

Adăugăm valoarea clasei active la primul element link de navigare. Acest lucru se face prin transmiterea valorii activeLink la matricea de linkuri. Deoarece activeLink este 0, de obicei tabloul preia primul element și, folosind API-ul classList, adaugă valoarea la clasa activă.

După ce această linie de cod este executată, vă amintiți că ne-am uitat la următoarele reguli de stil?

Ei bine, acum aceste reguli de stil intră în vigoare și ajută la evidențierea linkului de navigare activ din lista altor link-uri inactive. Vom reveni la aceste reguli de stil puțin mai târziu și le vom analiza mai detaliat.

Următorul lucru la care ne vom uita este handlerul de evenimente setClickedItem, care este apelat atunci când se face clic pe oricare dintre linkuri:

funcția setClickedItem (e) (removeActiveLinks (); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition (clickedLink);)

Această funcție comută mai întâi starea tuturor legăturilor dvs. la inactive apelând removeActiveLinks. Ne vom uita la această caracteristică puțin mai târziu.

Un alt lucru important pe care îl face această funcție este că schimbă valoarea proprietății itemID a elementului selectat în activeLink. Acest lucru asigură că activeLink indică întotdeauna un număr care corespunde blocului de conținut afișat în prezent în glisor.

După ce le-ai făcut pe acestea două ( mai degraba plictisitor), această funcție transmite un link către elementul selectat către funcția changePosition. Care, la rândul său, face câteva lucruri uimitoare, pe care le voi discuta în paragraful următor.

Aici au loc schimbările interesante! Să trecem puțin înainte și să aruncăm o privire la funcția changePosition:

// Handler-ul schimbă poziția glisorului după ce ne-am asigurat // că linkul de care avem nevoie este selectat ca activ. funcția changePosition (link) (link.classList.add ("activ"); var position = link.getAttribute ("data-pos"); wrapper.style.left = poziție;)

Această funcție face două lucruri:
І. Comută afișarea vizuală a linkului selectat pentru a indica faptul că acesta este activ în prezent.
II. Setează poziția elementului de ambalare.

Să aruncăm o privire mai atentă la aceste două lucruri.

Comutați afișarea vizuală a linkului selectat/activ

Pentru a vă fi mai clar despre ceea ce vorbeam înainte, linkurile dvs. de navigare pot fi în una din două stări. Aceste stări sunt pentru ca utilizatorul să vadă ce bloc de conținut este activ în prezent:

În această figură, puteți determina imediat că blocul de conținut corespunzător celui de-al patrulea link este activ în prezent, iar primele trei link-uri sunt inactive.

Această schimbare vizuală este realizată prin adăugarea și eliminarea claselor CSS. Clasa activă este adăugată la legătura activă. Toate linkurile care nu sunt active nu conțin o valoare de clasă activă. Veți înțelege cum funcționează acest lucru când ne uităm la funcția removeActiveLinks.

Oricum, vă amintiți că mai devreme am numit următoarele două reguli de stil:

#navLinks ul li.active (culoare fundal: # 333333; culoare: #FFFFFF; lățime contur: 7px;) #navLinks ul li.active: hover (culoare fundal: # 484848; culoare: #FFFFFF;)

În setClickedItem nostru ( cunoscută și ca o funcție care va fi apelată ca urmare a clicului pe un link), numim mai întâi removeActiveLinks:

funcția setClickedItem (e) (removeActiveLinks (); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition (clickedLink);)

Această funcție este responsabilă pentru eliminarea clasei active pentru toate legăturile de navigare:

funcția removeActiveLinks () (pentru (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Vă puteți gândi la el ca la un buton de resetare globală. Iterează peste legăturile de navigare care sunt stocate în variabila link și elimină valoarea clasei active folosind classList.remove (). Rețineți că, dacă oricare dintre legăturile de navigare conținea o valoare de clasă activă, ei bine... nu va mai fi acolo.

Astfel, am explicat cum să eliminați clasa activă din toate linkurile dvs. Adăugarea unei clase, la rândul său, este foarte simplă:

funcția removeActiveLinks () (pentru (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Aceeași ClassList pe care am folosit-o mai devreme pentru a elimina valoarea clasei active, o folosim pentru a adăuga înapoi valorile clasei active la linkul selectat. Această legătură selectată primește un argument de legătură care îi este transmis.

Setarea poziției carcasei

Aproape am terminat! După toți acești pași, ajungem în sfârșit la funcția changePosition, care setează de fapt poziția elementului slider shell și afișează blocul de conținut corespunzător linkului pe care l-ați selectat.

Să aruncăm o privire la următorul fragment:

funcția changePosition (link) (link.classList.add ("activ"); var position = link.getAttribute ("data-pos"); wrapper.style.left = poziție;)

Variabila de poziție stochează valoarea atributului data-pos al linkului pe care am făcut clic. După ce obținem valoarea atributului data-pos, setăm proprietatea stângă CSS a elementului wrapper la aceeași valoare.

Cum se leagă acest lucru cu implementarea efectului glisor? Îți amintești că am adăugat o regulă stilului #wrapper în urmă cu ceva timp?

#wrapper (lățime: 2200px; poziție: relativă; stânga: 0px; tranziție: stânga .5s ease-in-out;)

Rețineți că am definit tranziția să intre în vigoare atunci când proprietatea din stânga se schimbă. Ghiciți ce face JavaScript-ul nostru? Setează proprietatea rămasă! Tranziția CSS detectează această schimbare și declanșează mișcarea conținutului. Tot ce trebuie să faceți pentru ca toate acestea să funcționeze este să adăugați o linie de JavaScript.

Nu știu despre tine, dar pentru mine este pur și simplu uimitor. Acesta este ceva ce nu ne-am putut imagina acum câțiva ani când a trebuit să depunem mult efort și să scriem cod pentru a gestiona efectul glisor. Acesta este ceea ce face slider-ul nostru de conținut frumos.

La fel, tocmai am creat un glisor de conținut de la zero și (mai important) am învățat cum funcționează.

Îmbunătățirea glisorului de conținut

Glisorul de conținut pe care tocmai l-am creat este destul de grozav, dar îl puteți face și mai cool. În această secțiune, vom analiza două îmbunătățiri pe care le puteți găsi foarte utile. Pe parcurs, vom învăța câteva trucuri noi JavaScript și CSS. Va fi, așa cum spun tinerii acum: „Plâng!”

Derularea cu translate3d transform

În acest moment, diapozitivele noastre se derulează prin modificarea valorii proprietății CSS stânga care este aplicată elementului div wrapper. Folosind proprietatea stângă facem ca glisorul să funcționeze, totuși această metodă are dezavantaje serioase. Nu puteți utiliza accelerația hardware pentru a asigura tranziții line glisante.

Acest lucru este valabil mai ales pentru dispozitivele mobile, cu conexiuni la internet de viteză redusă, care folosesc adesea hardware, iar aici modificările intermitente, asemănătoare sărituri, în slide-uri pot fi deosebit de vizibile.

Acest lucru poate fi rezolvat cu funcția de transformare translate3d, care va face ca slide-urile să se miște fără probleme. Această funcție ia valorile x, y și z ca argumente, iar modificarea oricăreia dintre aceste valori va schimba poziția elementului țintă.

O caracteristică a acestei funcții este și faptul că, ca urmare a utilizării sale, hardware-ul browserului accelerează schimbarea poziției. Ce asteptam?

Primul lucru pe care trebuie să-l facem este să schimbăm regula stilului #wrapper. Înlocuiți declarația poziției și proprietăților din stânga cu următorul cod:

Astfel, transformarea este utilizată pentru a seta poziția inițială a elementului de înveliș.

Primul pas: adăugarea elementelor de construcție

În prima etapă, adăugăm următorul cod auxiliar sub codul principal pe care îl avem în prezent:

// // Utilizarea transformărilor // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName (transformă); // gestionează prefixele furnizorului funcția getSupportedPropertyName (proprietăți) (pentru (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }

Acest cod ne va ajuta să setăm proprietatea de transformare folosind prefixele furnizorului, astfel încât va fi acceptat de cât mai multe browsere.

Nu voi explica aceste șiruri în acest articol. Singurul lucru pe care trebuie să-l știți este că tot acest cod ajută la setarea proprietății Proprietate la transform, msTransform, mozTransform sau oTransform. În funcție de vechimea browserului dvs., una dintre aceste valori va fi utilizată.

Al doilea pas: introducerea lui Ahoy!

În funcția changePosition, găsiți următoarele linii de cod:

funcția changePosition (link) (var position = link.getAttribute ("data-pos"); wrapper.style.left = poziție; link.classList.add ("activ");)

Înlocuiți-le cu următorul cod:

funcția changePosition (link) (var position = link.getAttribute ("data-pos"); var translateValue = "(! LANG: translate3d (" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}

Acest cod face lucruri destul de simple. Variabila translateValue creează o vizualizare bazată pe șiruri a funcției translate3d în care partea X este completată cu valoarea variabilei de poziție. După ce această linie a fost creată, tot ce trebuie să facem este să o trecem obiectului de stil al elementului wrapper.

Rețineți că definiția proprietății de stil corespunzătoare este gestionată de variabila transformProperty, pe care am tratat-o ​​mai devreme.

Dacă vă uitați acum la document, veți vedea că blocurile de conținut din glisor sar dintr-un loc în altul.

Evident, asta nu este ceea ce te așteptai să vezi. Ce s-a întâmplat cu mișcarea lină? Răspunsul este că ne lipsește încă o schimbare. Din fericire, acest lucru este ușor de remediat. Dacă ne întoarcem la regula stilului #wrapper, observăm că declarația de tranziție arată astfel:

#wrapper (lățime: 2200px; transformare: translate3d (0, 0, 0); tranziție: stânga .5s ease-in-out;)

Tranziția noastră urmărește modificările aduse proprietății din stânga. Nu mai folosim această proprietate, așa că tranziția noastră nu poate începe să funcționeze. Pentru a corecta această nedreptate teribilă, înlocuiți cuvântul cheie de proprietate stânga din declarația de tranziție cu cuvântul cheie de proprietate de transformare:

#wrapper (lățime: 2200px; transform: translate3d (0, 0, 0); tranziție: transform .5s ease-in-out;)

Odată ce faceți aceste modificări, glisorul nostru va funcționa din nou în același mod ca înainte.

Singura diferență este că accelerarea hardware este acum utilizată la schimbarea diapozitivelor, iar acum va fi mai lină și va fi acceptată pe mai multe dispozitive.

Schimbare automată de diapozitive la intervale de câteva secunde

Momentan, slide-urile noastre se schimbă doar când facem clic pe unul dintre linkurile de navigare. Dar acesta nu este singurul mod în care funcționează glisorul. Multe glisoare de conținut derulează automat prin conținut la fiecare câteva secunde și există, de asemenea, opțiunea de a sări la o anumită secțiune folosind link-uri de navigare.

Un exemplu de astfel de glisor de conținut pe care îl vedeți mai jos:

Da, acesta este vechiul nostru glisor cu câteva modificări minore, astfel încât conținutul să poată derula automat în container. Ghiciți ce vom face în continuare?

Să facem derularea automată a diapozitivelor!

Funcția setInterval ne va ajuta în acest sens. Scopul principal al acestei funcții este de a se asigura că codul este executat la intervale regulate:

window.setInterval (functionToCall, întârziere);

La fiecare câteva secunde ( sau cât setați ca valoare a intervalului), funcția setInterval îi spune cursorului nostru să treacă la următorul bloc de conținut.

Când conținutul s-a terminat, glisorul trece prin buclă la începutul conținutului și începe totul din nou. Acest lucru se face destul de ușor. Tot ce trebuie să știți este câteva trucuri și o înțelegere solidă a modului în care funcționează glisorul de conținut.

Prima modificare pe care trebuie să o facem este să adăugăm codul suplimentar necesar pentru a finaliza această lucrare. La sfârșitul codului pe care îl aveți deja, adăugați următoarele rânduri:

// // Cod pentru schimbarea automată a diapozitivelor // var timeoutID; funcția startTimer () (// așteptați 2 secunde înainte de a apela goInactive timeoutID = window.setInterval (goToNextItem, 2000);) startTimer (); funcția goToNextItem () (eliminăActiveLinks (); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }

Ne vom uita la ce înseamnă tot acest cod în curând. Acum adăugați toate acestea. După ce faceți acest lucru, vizualizați glisorul de conținut în browser. Veți vedea că diapozitivele de conținut se schimbă în container la fiecare două secunde.

Mai rămâne o singură schimbare majoră de făcut. Diapozitivele se rotesc acum la fiecare două secunde, indiferent dacă ați făcut clic pe linkul de navigare sau nu.

Ar fi mai corect să faceți astfel încât, după ce faceți clic pe unul dintre linkuri, cronometrul să fie resetat la 0. Pentru a face această modificare, adăugați următoarea linie de cod la handlerul de evenimente setClickedItem:

După aceea, glisorul de conținut se va comporta conform așteptărilor când intrați și faceți clic pe linkul de navigare. Ura!

Explicația modificărilor automate de diapozitive

Deci, mai avem un singur lucru de rezolvat. Să aruncăm o privire rapidă la codul pe care tocmai l-am adăugat și să înțelegem de ce face ceea ce face.

Să începem cu funcția goToNextItem / span>:

funcția goToNextItem () (eliminăActiveLinks (); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}

Această funcție este responsabilă pentru urmărirea conținutului care este afișat în prezent și a ceea ce urmează. Pentru a înțelege mai bine ce se întâmplă, aruncați o privire la imaginea de mai jos:

Variabila activeLink indică poziția blocului de conținut afișat curent. Fiecare informație este asociată cu un element corespunzător în cadrul matricei de legături.

Numărul total de elemente din interiorul matricei link-uri poate fi setat folosind proprietatea length. Acum să revenim la codul nostru.

Declarația if a funcției goToNextItem verifică pur și simplu dacă mai există conținut sau dacă glisorul ar trebui să se întoarcă la început:

dacă (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; }

Dacă te uiți cu atenție la diagramă și la cod, vei înțelege logica. Practic, odată ce obținem valoarea corectă pentru activeLink, orice altceva din glisorul nostru va funcționa magic.

Magia în sine este realizată cu următoarele două linii furnizate de funcția changePosition, care la rândul său este apelată cu un pointer către următorul bloc de conținut care urmează să fie afișat:

var newLink = link-uri; changePosition (newLink);

În momentul de față, calea în care este procesat codul nostru nu diferă de modul în care a fost procesat atunci când a fost făcut clic manual pe link.

Deci... ne-am uitat la codul din funcția goToNextItem pentru a naviga la următorul conținut. Următoarele linii sunt utilizate automat pentru a invoca acest diapozitiv:

var timeoutID; funcția startTimer () (// așteptați 2 secunde înainte de a apela goInactive timeoutID = window.setInterval (goToNextItem, 2000);) startTimer (); funcția resetTimer () (window.clearInterval (timeoutID); startTimer ();)

Funcția startTimer este folosită pentru a porni. Această funcție conține un apel la setInterval, care asigură că funcția goToNextItem este apelată la fiecare 2 secunde ( sau 2000 de milisecunde).

Prin simpla adăugare a acestei funcții (și apelând-o), veți face glisorul dvs. de conținut să înceapă să defileze automat prin blocuri de conținut.

Rămâne doar să ne dăm seama cum este resetat temporizatorul ( pe care l-am numit setInterval) când faceți clic manual pe link. Pentru a face față acestui lucru, este folosit restul codului nostru.

Metoda prin care se resetează cronometrul este următoarea: oprim funcția setInterval și apoi o pornim din nou. Cum se face acest lucru poate fi puțin dificil de înțeles.

Stocăm identificatorul funcției numite setInterval și apoi folosim același identificator pentru a opri mai târziu apelarea aceleiași funcții setInterval. Să fiu clar.

Stocăm acest identificator în variabila timeoutID și îl inițializam în apelul startTimer și este convenabil să folosim același identificator în cadrul funcției resetTimer:

funcția resetTimer () (window.clearInterval (timeoutID); startTimer ();)

Funcția clearInterval preia identificatorul (prin timeoutID) al funcției setInterval pe care dorim să o oprim.

După ce am oprit temporizatorul în cadrul funcției resetTimer, apelăm startTimer și îl pornim din nou:

funcția resetTimer () (window.clearInterval (timeoutID); startTimer ();)

Logica este simplă. Cronometrul se oprește atunci când selectați manual ce bloc de conținut să afișați în glisor:

funcția setClickedItem (e) (removeActiveLinks (); resetTimer (); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition (clickedLink);)

După ce selectați un nou bloc de conținut, glisorul se oprește timp de două secunde înainte de a trece la următorul bloc. Funcțiile startTimer și resetTimer urmăresc toate acestea.

Concluzie

Gata, am explicat cum să creați un glisor de conținut frumos folosind numai

HTML

CSS

și JavaScript. În plus, ați învățat cum să setați unele modificări pentru a crește performanța și pentru a oferi posibilitatea de a schimba automat blocuri de conținut.

Deși glisorul în sine nu este definit de atât de mult cod, ar putea dura ceva timp pentru a defalca conceptele din spatele lui. Am pus în articol link-uri către alte surse care acoperă subiectele pe care le-am atins doar superficial. Le poți citi când ai timp.

Glisoarele de conținut vin în toate formele și dimensiunile. Unele constau din mai multe niveluri, unde conținutul poate fi modificat atât pe verticală, cât și pe orizontală.

Unele glisoare conțin conținut aliniat vertical, cu blocuri stivuite unul peste altul. Dacă sunteți mai degrabă proactiv și doriți să utilizați CSS în loc de tranziție

Pentru început, acest articol a fost scris cu scopul de a vă spune cum să creați un glisor de defilare a imaginii pentru paginile web. Acest articol nu este în niciun caz de natură educațională, servește doar ca un exemplu despre cum puteți implementa obiectul nostru de considerare. Puteți folosi codul oferit în acest articol ca un fel de șablon pentru astfel de dezvoltări, sper că voi reuși să transmit cititorului toată esența a ceea ce am scris într-un mod suficient de detaliat și într-un mod accesibil.

Și acum la obiect, nu cu mult timp în urmă trebuia să pun un glisor pe un site, dar după ce am căutat pe Internet scripturi gata făcute, nu am găsit nimic care merită. unele nu au funcționat așa cum aveam nevoie, în timp ce altele nu au pornit deloc fără erori în consolă. Utilizare jQuery - pluginuri mi s-a parut prea neinteresant pentru slider, tk. Deși voi rezolva problema cu asta, nu voi înțelege funcționarea acestui mecanism, iar folosirea pluginului de dragul unui slider nu este foarte optimă. De asemenea, nu am vrut să înțeleg scripturile strâmbe, așa că am decis să scriu propriul meu script pentru glisor, pe care eu însumi îl voi marca după cum am nevoie.

Pentru început, trebuie să decidem cu privire la logica glisorului în sine și apoi să trecem la implementare, în această etapă este foarte important să avem o înțelegere clară a funcționării acestui mecanism, deoarece fără el nu putem scrie codul care funcționează exact așa cum ne dorim.

Obiectul nostru principal va fi fereastra de vizualizare, adică un bloc în care vom vedea cum se învârt pozele noastre, în el vom avea slidewrapper, acesta va fi blocul nostru care va conține toate imaginile, aliniate într-o singură linie, și care își va schimba poziția în interiorul fereastra de vizualizare.


Mai departe, pe părțile laterale din interior fereastra de vizualizare, pe verticală în mijloc, vor fi amplasate butoanele înapoi și înainte, la clic pe care vom schimba și poziția slidewrapper relativ fereastra de vizualizare, provocând astfel efectul derulării imaginilor. Și, în sfârșit, ultimul obiect va fi butoanele noastre de navigare situate în partea de jos. fereastra de vizualizare.


Când facem clic pe ele, ne vom uita pur și simplu la numărul de serie al acestui buton și ne vom deplasa la diapozitivul de care avem nevoie, din nou prin deplasarea slidewrapper(compensarea se va face prin modificare transforma proprietățile css, a cărui valoare va fi calculată constant).

Cred că logica întregului caz ar trebui să fie clară după ce am afirmat mai sus, dar dacă mai sunt neînțelegeri undeva, atunci totul va fi lămurit în codul de mai jos, trebuie doar puțină răbdare.

Acum hai sa scriem! În primul rând, ne vom deschide fișier indexși scrieți marcajul de care avem nevoie acolo:

După cum puteți vedea, nimic complicat bloc-pentru-glisor servește doar ca același bloc în care va fi plasat cursorul nostru, în interiorul său fereastra de vizualizareîn care noastre slidewrapper, alias lista imbricată, aici li sunt diapozitive și img- poze în interiorul lor. Vă rugăm să acordați atenție faptului că toate imaginile trebuie să aibă aceeași dimensiune sau, cel puțin, proporții, altfel glisorul va arăta strâmb, tk. dimensiunile sale depind direct de raportul de aspect al imaginii.

Acum trebuie să stilizăm toată chestia asta, de obicei stilurile nu sunt cu adevărat comentate, dar am decis să atrag atenția asupra acestui lucru, ca să nu existe neînțelegeri pe viitor.

body (marja: 0; umplutură: 0;) # bloc-pentru-slider (lățime: 800px; margine: 0 auto; margin-top: 100px;) #port de vizualizare (lățime: 100%; afișare: tabel; poziție: relativă; overflow: ascuns; -webkit-user-select: niciunul; -moz-user-select: niciunul; -ms-user-select: niciunul; -o-user-select: niciunul; user-select: niciunul;) #slidewrapper ( poziție: relativă; lățime: calc (100% * 4); sus: 0; stânga: 0; margine: 0; umplutură: 0; -webkit-tranziție: 1s; -o-tranziție: 1s; tranziție: 1s; -webkit -funcția-temporizare-tranziție: ease-in-out; -o-transition-timing-function: ease-in-out; function-timing-tranziție: ease-in-out;) #slidewrapper ul, #slidewrapper li (marja : 0; padding: 0;) #slidewrapper li (lățime: calc (100% / 4); list-style: none; display: inline; float: left;) .slide-img (lățime: 100%;)

Sa incepem cu bloc-pentru-glisor, acesta, din nou, este blocul nostru de pe pagină, pe care îl vom pune deoparte pentru glisor, înălțimea acestuia va depinde de lățimea și de proporțiile imaginii noastre, deoarece fereastra de vizualizare ocupă toată lățimea bloc-pentru-glisor apoi eu însumi diapozitiv are aceeași lățime și, în consecință, poza din interiorul ei își schimbă înălțimea în funcție de lățime (se păstrează proporțiile). Am plasat acest element orizontal în mijlocul paginii mele, umplând 100px de sus, făcându-i poziția mai convenabilă pentru un exemplu.

Element fereastra de vizualizare, după cum am menționat deja, ocupă întreaga lățime a noastră bloc-pentru-glisor, are proprietatea debordare: ascuns, ne va permite să ne ascundem fluxul de imagini, care va apărea din fereastra de vizualizare.


Ca urmare a proprietate css - user-select: niciunul, vă permite să scăpați de selecția albastră a elementelor glisante individuale cu mai multe clicuri pe butoane.

Trecând la slidewrapper De ce poziție: relativă, dar nu absolut? Totul este foarte simplu, nu. dacă alegem a doua variantă, atunci cu proprietatea overflow viewport: ascuns absolut nimic nu ni se va părea, tk. eu insumi fereastra de vizualizare nu se va adapta la înălțime slidewrapper, din cauza a ceea ce va avea inaltime: 0... De ce contează atât de mult lățimea și de ce o setăm deloc? Cert este că diapozitivele noastre vor avea o lățime egală cu 100% din fereastra de vizualizare, iar pentru a le aranja in linie avem nevoie de un loc unde vor sta, deci de latimea slidewrapper ar trebui să fie egală 100% lățimea ferestrei de vizualizareînmulțit cu numărul de diapozitive (în cazul meu, 4). Cu privire la tranzițieși tranziție-funcție de sincronizare apoi aici 1sînseamnă că o schimbare de poziţie slidewrapper va avea loc în decurs de 1 secundă și o vom observa și ușurință-in-out- genul de animație în care merge mai întâi încet, accelerează la mijloc și apoi încetinește din nou, aici poți deja seta valorile la discreția ta.

Următorul bloc de proprietăți se stabilește slidewrapper iar copiii săi au zero padding, comentariile nu sunt necesare aici.

În continuare, ne vom stila diapozitivele, lățimea lor ar trebui să fie egală cu lățimea. fereastra de vizualizare, dar de atunci ei sunt in slidewrapper, a cărui lățime este egală cu lățimea ferestrei de vizualizare înmulțită cu numărul de diapozitive, apoi pentru a obține lățimea fereastra de vizualizare din nou, avem nevoie de 100% din lățime slidewrapperîmpărțiți la numărul de diapozitive (în cazul meu, din nou, cu 4). Apoi le transformăm în elemente inline folosind display: inlineși setați fluxul la stânga adăugând proprietatea plutește la stânga... Despre stil de listă: niciunul Pot spune că îl folosesc pentru a elimina marcatorul implicit din li, în cele mai multe cazuri este un fel de standard.

Cu slide-img totul este simplu, imaginea va ocupa întreaga lățime diapozitiv, diapozitiv se ajustează la înălțimea sa, slidewrapper se regleaza la inaltime diapozitiv, și înălțimea fereastra de vizualizare la rândul său va lua valoarea înălțimii slidewrapper, astfel încât înălțimea glisorului nostru va depinde de raportul de aspect al imaginii și de dimensiunea blocului prevăzut pentru glisor, despre care am scris deja mai sus.

Cred că aici ne-am dat seama de stiluri, să facem o expunere de diapozitive simplă, fără butoane, deocamdată și, după ce ne-am asigurat că funcționează corect, să le adăugăm și să le stilăm.

Să ne deschidem js, care va conține codul slider, nu uitați să includeți jQuery de cand vom scrie folosind acest cadru. Apropo, la momentul scrierii acestui articol, folosesc versiunea jQuery 3.1.0... Fișierul cu scriptul în sine trebuie inclus la sfârșitul etichetei corp de cand vom lucra cu elementele DOM care trebuie inițializate mai întâi.

Pentru moment, trebuie să declarăm câteva variabile, una va stoca numărul diapozitivului pe care îl vedem la un anumit moment în timp. fereastra de vizualizare, i-am pus numele slideAcum, iar al doilea va stoca numărul acestor diapozitive, acesta este slideCount.

var slideNow = 1; var slideCount = $ ("# slidewrapper"). copii (). lungime);

Variabil slideAcum este necesar să se stabilească valoarea iniţială 1, deoarece când pagina se încarcă, noi, pe baza markupului nostru, vom vedea primul diapozitiv fereastra de vizualizare.

V slideCount vom pune numărul de copii slidewrapper, aici totul este logic.
Apoi, trebuie să creați o funcție care va fi responsabilă pentru comutarea diapozitivelor de la dreapta la stânga, o vom declara:

funcția nextSlide () ()

Îl vom numi în blocul principal al codului nostru, la care vom ajunge, dar deocamdată vom spune funcției noastre ce trebuie să facă:

funcția nextSlide () (dacă (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ($ ("# slidewrapper"). css ("transform", "translate (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# viewport"). width () * ( slideNow); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0) ) "," -ms-transform ":" traduce ("+ translateWidth +" px, 0) ",)); slideNow ++;))

În primul rând, verificăm dacă ne aflăm acum pe ultimul slide al feedului nostru? Pentru a face acest lucru, luăm numărul tuturor diapozitivelor noastre folosind $ ("# slidewrapper"). copii (). lungimeși verificați-l cu numărul diapozitivului nostru, dacă se dovedesc a fi egale, atunci aceasta înseamnă că trebuie să începem să arătăm din nou panglica, de la 1 diapozitiv, ceea ce înseamnă că schimbăm proprietatea de transformare css la slidewrapper pe traduce (0, 0), mutându-l astfel în poziția inițială, astfel încât primul diapozitiv să apară în câmpul nostru vizual, nu uitați și de –Webkit și –ms pentru afișare adecvată între browsere (vezi. referință proprietăților css). După aceea, să nu uităm să actualizăm valoarea variabilei. slideAcum, informând-o că diapozitivul numărul 1 se află în câmpul ei de vedere: slideNow = 1;

Aceeași condiție include și verificarea ca numărul de diapozitive pe care îl vedem să fie în limitele numărului de diapozitive noastre, dacă cumva acest lucru nu este îndeplinit, atunci vom reveni la primul diapozitiv.

Dacă prima condiție nu este îndeplinită, atunci aceasta înseamnă că în momentul de față nu suntem pe ultimul slide, sau pe vreunul inexistent, ceea ce înseamnă că trebuie să trecem la următorul, o vom face prin schimbare. slidewrapper la stânga cu o valoare egală cu lățimea fereastra de vizualizare, deplasarea se va produce din nou prin proprietatea familiară Traduceți a cărui valoare va fi egală cu „traducere („ + translateWidth + „px, 0)”, Unde translateWidth- distanta cu care noastre slidewrapper... Apropo, să declarăm această variabilă la începutul codului nostru:

var translateWidth = 0;

După ce treceți la următorul diapozitiv, spuneți diapozitivului nostru Acum că vedem următorul diapozitiv: slideNow ++;

În acest moment, unii cititori pot avea o întrebare: de ce nu am înlocuit $ ("# fereastră de vizualizare"). lățime () la o variabilă, de exemplu slideWidth să avem mereu la îndemână lățimea toboganului nostru? Răspunsul este foarte simplu, dacă site-ul nostru este responsive, atunci, în consecință, blocul alocat pentru glisor este și adaptiv, de aici se poate înțelege că atunci când se schimbă dimensiunea lățimii ferestrei fără a reîncărca pagina (de exemplu, întoarcerea telefonul lateral), lățimea fereastra de vizualizare se va schimba și, în consecință, lățimea unui diapozitiv se va modifica și ea. În acest caz, al nostru slidewrapper va fi deplasat cu valoarea lățimii care a fost inițial, ceea ce înseamnă că imaginile vor fi afișate în părți sau deloc afișate în fereastra de vizualizare... Scriind la funcția noastră $ ("# fereastră de vizualizare"). lățime () in loc de slideWidthîl facem să calculeze lățimea de fiecare dată când comutăm diapozitivele fereastra de vizualizare, oferind astfel un defilare la diapozitivul dorit atunci când lățimea ecranului se modifică brusc.

Totuși, am scris funcția, acum trebuie să o apelăm după un anumit interval de timp, putem stoca și intervalul într-o variabilă, astfel încât dacă vrem să o modificăm, să schimbăm o singură valoare din cod:

var slideInterval = 2000;

Timpul în js este specificat în milisecunde.

Acum să scriem următoarea construcție:

$ (document) .ready (funcție () (setInterval (nextSlide, slideInterval);));

Totul nu este nicăieri mai ușor, suntem prin construcție $ (document) .gata (funcție () ()) spunem că următoarele acțiuni trebuie efectuate după ce documentul este încărcat complet. Apoi numim doar funcția următorul Slide cu un interval egal cu slideInterval, folosind funcția încorporată setInterval.

După toate acțiunile pe care le-am efectuat mai sus, glisorul nostru ar trebui să se învârtă bine, dar dacă ceva nu a mers prost cu tine, atunci problema poate fi fie în versiune jQuery, sau în conexiunea greșită a oricăror fișiere. De asemenea, nu este necesar să excludeți că ați fi putut greși undeva în cod, așa că nu vă pot sfătui decât să verificați totul.


Între timp, mergeți mai departe, adăugați la glisorul nostru o funcție cum ar fi oprirea defilării la hover, pentru aceasta trebuie să scriem în blocul principal de cod (în interiorul $ (document) .gata (funcție () ())) un astfel de lucru:

$ ("# viewport"). hover (funcție () (clearInterval (switchInterval);), function () (switchInterval = setInterval (nextSlide, slideInterval);));

Pentru a începe să analizăm acest cod, trebuie să știm ce este switchInterval... În primul rând, aceasta este o variabilă care stochează un apel periodic la funcția nextSlide, pentru a spune simplu, folosim această linie de cod: setInterval (nextSlide, slideInterval);, transformat în asta: switchInterval = setInterval (nextSlide, slideInterval);... După aceste manipulări, blocul nostru principal de cod a luat următoarea formă:

$ (document) .ready (funcție () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport"). hover (funcție () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

Aici folosesc event planare, care înseamnă „la hover”, acest eveniment îmi permite să urmăresc momentul în care trec cu mouse-ul peste un obiect, în acest caz pe fereastra de vizualizare.

După ce trec cu mouse-ul, șterg spațierea, pe care o voi indica în paranteze (acesta este sistemul nostru switchInterval), apoi, despărțit prin virgule, scriu ce voi face când voi muta cursorul înapoi, în acest bloc îi atribui din nou switchInterval apel periodic de funcții următorul Slide.

Acum, dacă verificăm, vom vedea cum reacţionează cursorul nostru la trecerea mouse-ului, oprind comutarea slide-ului.

Acum este timpul să adăugați butoane la glisorul nostru, să începem cu butoanele înainte și înapoi.

În primul rând, să le marcam:

La început, acest marcaj poate fi de neînțeles, voi spune imediat că am împachetat aceste două butoane într-unul singur div cu clasa prev-next-btns doar pentru confortul dvs., nu trebuie să faceți acest lucru, rezultatul nu se va schimba, acum le vom adăuga stiluri și totul va deveni clar:

# prev-btn, # next-btn (poziție: absolut; lățime: 50px; înălțime: 50px; culoarea fundalului: #fff; raza chenarului: 50%; sus: calc (50% - 25px);) # prev- btn: hover, # next-btn: hover (cursor: pointer;) # prev-btn (stânga: 20px;) # next-btn (dreapta: 20px;)

În primul rând, ne poziționăm butoanele prin poziție: absolută, astfel le vom controla liber poziția în interiorul nostru fereastra de vizualizare, apoi vom indica dimensiunile acestor butoane și utilizarea hotar-raza rotunjește colțurile astfel încât acești butoane să se transforme în cercuri. Culoarea lor va fi albă, adică #fff, și indentarea lor de la marginea de sus fereastra de vizualizare va fi egală cu jumătate din înălțimea acesteia fereastra de vizualizare minus jumătate din înălțimea butonului în sine (în cazul meu 25px) pentru a le putea poziționa vertical în centru. În continuare, vom indica că atunci când trecem cu mouse-ul peste ele, cursorul nostru se va schimba în indicatorși, în sfârșit, spuneți butoanelor noastre individual să indenteze 20px de la marginile lor, astfel încât să le putem vedea așa cum credem de cuviință.

Din nou, puteți stila elementele paginii așa cum doriți, vă dau doar un exemplu al stilurilor pe care am decis să le folosesc.

După coafare, glisorul nostru ar trebui să arate cam așa:


Apoi, întoarceți-vă la nostru js unde descriem cum funcționează butoanele noastre. Ei bine, să adăugăm o altă funcție, ne va arăta diapozitivul anterior:

funcția prevSlide () (dacă (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0) ) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px , 0) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideAcum--;))

Se numeste prevSlide, va fi apelat doar când dați clic pe prev-btn... În primul rând, verificăm dacă suntem sau nu pe primul slide, aici verificăm și dacă suntem slideAcum dincolo de limitele gamei reale a toboganelor noastre și, dacă vreuna dintre condiții funcționează, vom trece la ultimul diapozitiv prin deplasarea slidewrapper la valoarea de care avem nevoie. Vom calcula această valoare prin formula: (lățimea unui diapozitiv) * (numărul de diapozitive - 1), luăm toate acestea cu semnul minus, deoarece îl deplasăm la stânga, se dovedește că fereastra de vizualizare acum ne va arăta ultimul diapozitiv. La sfârșitul acestui bloc, trebuie să spunem și variabila slideAcum că ultimul diapozitiv este acum în câmpul nostru vizual.

Dacă nu suntem pe primul diapozitiv, atunci trebuie să mutăm 1 înapoi, pentru aceasta schimbăm din nou proprietatea transforma pentru slidewrapper... Formula este următoarea: (lățimea unui diapozitiv) * (numărul diapozitivului curent - 2), din nou, luăm toate acestea cu semnul minus. Dar de ce este -2, și nu -1, trebuie să mutăm doar 1 diapozitiv înapoi? Cert este că dacă suntem, să zicem, pe al 2-lea slide, atunci variabila X proprietăți transforma: traduce (x, 0) al nostru slidewrapper este deja egală cu lățimea unui diapozitiv, dacă îi spunem că trebuie să scădem 1 din numărul diapozitivului curent, atunci vom obține din nou unitatea cu care este deja deplasat slidewrapper, deci va trebui să mutați chiar aceste lățimi cu 0 fereastra de vizualizare, ceea ce înseamnă pe slideNow - 2.

Acum trebuie doar să adăugăm aceste linii la blocul principal de cod:

$ ("# next-btn"). clic (funcție () (nextSlide ();)); $ ("# prev-btn"). click (funcție () (prevSlide ();));

Aici doar urmărim dacă a fost făcut un clic pe butoanele noastre, iar în acest caz numim funcțiile de care avem nevoie, totul este simplu și logic.

Acum să adăugăm butoanele de navigare din slide, înapoi la marcaj:

După cum puteți vedea, înăuntru fereastra de vizualizare a apărut o listă imbricată, dați-i un identificator nav-btns, inauntru li- butoanele noastre de navigare, le vom atribui o clasă slide-nav-btn, cu toate acestea, putem termina cu marcajul, să trecem la stiluri:

# nav-btns (poziție: absolut; lățime: 100%; jos: 20px; padding: 0; margine: 0; text-align: center;) .slide-nav-btn (poziție: relativă; afișare: inline-btn; stil listă: niciunul; lățime: 20px; înălțime: 20px; culoarea fundalului: #fff; raza chenar: 50%; margine: 3px;) .slide-nav-btn: hover (cursor: pointer;)

Blok nav-btns, în care se află butoanele noastre, dăm proprietatea poziție: absolută, ca să nu se întindă fereastra de vizualizareîn înălţime, pentru că la slidewrapper proprietate poziție: relativă, setăm lățimea la 100%, astfel încât folosind text-align: centru butoanele centrale orizontal relativ fereastra de vizualizare, apoi folosind proprietatea partea de jos clarificăm blocului nostru că ar trebui să fie la o distanță de 20px de marginea de jos.

Facem la fel cu butoanele ca și cu slide-urile, dar acum le setăm display: inline-block de cand la display: inline ei nu reacţionează la lăţimeși înălţime de cand sunt într-un bloc poziționat absolut. Le vom face albe și cu ajutorul celor deja familiare nouă hotar-raza să le dăm o formă de cerc. Când treceți cu mouse-ul peste ele, vom schimba aspectul cursorului nostru pentru afișarea obișnuită.

Acum să trecem la jQuery - părți:
Mai întâi, să declarăm variabila navBtnId, care va stoca indexul butonului pe care l-am făcut clic:

var navBtnId = 0;
$ (". slide-nav-btn"). faceți clic pe (funcție () (navBtnId = $ (this) .index (); dacă (navBtnId + 1! = slideNow) (translateWidth = - $ ("# viewport"). width () * (navBtnId); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Iată-ne când facem clic pe nostru slide-nav-btn numim funcția, care în primul rând atribuie variabilei navBtnId indexul butonului apăsat, adică numărul său ordinal, deoarece numărarea începe de la zero, atunci dacă facem clic pe al doilea buton, atunci în navBtnId valoarea se scrie 1. În continuare, facem o verificare, în care adăugăm unul la numărul ordinal al butonului pentru a obține un astfel de număr de parcă numărătoarea inversă nu ar fi de la 0, ci de la 1, comparăm acest număr cu numărul diapozitivului curent, dacă acestea coincid, atunci nu vom întreprinde nicio măsură, deoarece diapozitivul dorit este deja introdus fereastra de vizualizare.

Dacă toboganul de care avem nevoie nu este vizibil fereastra de vizualizare, apoi calculăm distanța cu care trebuie să ne deplasăm slidewrapper spre stânga, apoi modificați valoarea proprietățile de transformare css pe translate(aceeași distanță în pixeli, 0). Am făcut deja acest lucru de mai multe ori, așa că nu ar trebui să existe întrebări. La sfârșit, salvăm din nou valoarea slide-ului curent într-o variabilă. slideAcum, această valoare poate fi calculată adăugând una la indexul butonului apăsat.

Asta e tot, de fapt, dacă ceva nu este clar, atunci las un link către jsfiddle, unde va fi furnizat tot codul scris în material.

Multumesc pentru atentie!

Etichete:

• glisorul jquery
• css
• animație css3
• html

Adaugă etichete