Cum de a construi un slider cu carusel receptiv pe ecran complet cu Owl.js

Într-un post anterior mi-am arătat cum să construiți o galerie de imagini personalizată cu slick.js. Astăzi voi acoperi procesul de creare a unui slider animat, reactiv, cu ecran complet de carusel cu owl.js (sau "Caruselul Owl").

Ca de obicei, pentru a obține o idee inițială despre ceea ce vom construi, aruncăm o privire la demo-ul CodePen (consultați versiunea mai mare pentru o experiență mai bună):

Ce este caruselul Owl?

Owl.js este un plugin popular jQuery creat de David Deutch, care vă permite să construiți caruseluri atractive și receptive. Pentru a înțelege mai bine ce vă poate oferi acest plugin, verificați demo-urile.

Din fericire, are un suport excelent pentru browser, fiind testat pe următoarele dispozitive:

Crom
Firefox
Operă
IE7 / 8/10/11
iPad Safari
iPod4 Safari
Nexus 7 Chrome
Galaxy s4
Nokia 8s Windows8

Pentru mai multe detalii, consultați documentația.

Noțiuni de bază cu Owl.js

Pentru a începe cu owl, începeți prin descărcarea și instalarea următoarelor fișiere în proiectul dvs.:

jQuery
owl.carousel.css sau versiunea sa minificată
owl.carousel.js sau versiunea sa minificată

Opțional, este posibil să doriți să importați owl.theme.default.css fişier.

Puteți obține o copie a fișierelor de bufniță corespunzătoare vizitând Gothub repo, utilizând un manager de pachete (de exemplu, npm) sau încărcând activele necesare printr-un CDN (de exemplu, cdnjs). Pentru acest tutorial, voi alege ultima opțiune.

În scopul acestui tutorial, dincolo de fișierele bufnițe, am inclus și Babel și Bootstrap 4.

În acest sens, dacă te uiți sub Setări din fișierul demo, veți vedea că am inclus trei fișiere externe CSS și două fișiere JavaScript externe.

1. HTML-ul

Pentru a elimina lucrurile, definim un carusel care are trei diapozitive. Fiecare dintre aceste diapozitive conține un titlu, o subtitrare și un buton de chemare la acțiune.

Iată structura necesară pentru pagina noastră demo:

Merită menționat două lucruri în acest moment:

Codul de mai sus utilizează clasele Bootstrap 4. Cadrul Bootstrap nu este vital; Am inclus-o doar pentru că am vrut să accelerez dezvoltarea CSS.
Am adăugat imaginea de fundal a fiecărui diapozitiv prin stiluri inline. De cele mai multe ori, atunci când aveți de-a face cu conținut dinamic, această metodă CSS cea mai comună pentru adăugarea imaginilor de fundal.

2. CSS

Cu ajutorul codului HTML, să examinăm stilurile CSS pe care le vom aplica pe pagina noastră. Pentru simplitate, vom discuta doar o parte din stilurile disponibile.

În primul rând, definim două proprietăți personalizate și două clase de ajutor:

: rădăcină -main-alb-culoare: alb; --main-negru-culoare: negru; . statică poziție: statică;  .cover background-size: cover; fundal-poziție: centru; background-repeat: nu-repeta;

Apoi, specificăm stilurile pentru diapozitivele cu carusel, inclusiv tranzițiile:

.owl-carousel .owl-slide poziție: relativă; înălțime: 100vh; fundal-culoare: lightgray;  .cu-carusel .owl-slide-animat transform: translateX (20px); opacitate: 0; vizibilitate: ascuns; tranziție: toate 0,05s;  .carusel .owl-slide-animated.is-a fost transferat transform: none; opacitate: 1; vizibilitate: vizibil; tranziție: toate 0,5 secunde;  .pagina-carusel .owl-slide-title.is-tranziție tranziție-întârziere: 0.2s;  .carusel .owl-slide-subtitle.is-tranziție tranziție-întârziere: 0.35s;  .carusel .owl-slide-cta.is-tranziție tranziție-întârziere: 0.5s;

În cele din urmă, stabilim câteva reguli pentru metodele de navigare:

.owl-carousel .owl-puncte, .wl-carousel .owl-nav poziție: absolut;  .pagină-carusel .dot-puncte .dot-punct span fundal: transparent; graniță: 1px solid var (- principal-negru-culoare); tranziție: toate ușurința de 0,2 s;  .pagină-carusel .dot-puncte .owl-dot: hover span, .wl-carousel .dot-puncte .owl-dot.active span fundal: var (- principal-negru-culoare); . carusel de navigație. navă-nav stânga: 50%; top 10%; transformare: translateX (-50%); marja: 0;

Notă: Diapozitivele ar trebui să acopere înălțimea totală a ferestrei și, prin urmare, le vom da înălțime: 100vh. Cu toate acestea, deoarece această unitate este inconsistentă pentru anumite dispozitive (de ex. Dispozitive iOS), o altă opțiune este de a seta înălțimea diapozitivelor prin JavaScript (pentru mai multe informații, consultați panoul JavaScript al demo-ului).

3. JavaScript-ul

În acest moment suntem gata să ne îndreptăm atenția către JavaScript.

Inițializarea caruselului

Ca un prim pas, vom inițializa caruselul. Implicit pluginul oferă "navigare cu puncte", dar caruselul nostru va include și săgeți de navigare.

Owl opțiuni de navigare

Activați opțiunea de navigare prin intermediul opțiunii nav proprietate de configurare. În plus, definim unele SVG-uri personalizate ca săgeți datorită navText proprietate de configurare.

Codul care declanșează caruselul este prezentat mai jos:

owlCarousel (elemente: 1, bucla: true, nav: true, navText: ['","']);

Adăugarea de animații la elementele de diapozitive

Ca următorul pas, animăm conținutul fiecărui slide. Acest comportament este tratat prin schimbat eveniment care oferă owl.

Iată codul asociat:

$ owlCarousel.on ("changed.owl.carousel", e => $ (". owl-slide-animated")) removeClass ("is-transitioned") const $ currentOwlItem = ) .eq (e.item.index); $ currentOwlItem.find (". owl-slide-animated"); addClass ("is-transitioned"););

Deci, de fiecare dată când vizităm un nou diapozitiv, mai întâi conținutul tuturor diapozitivelor dispare. Apoi, conținutul diapozitivului curent apare cu o animație frumoasă în diapozitiv.

Notă: in loc de schimbat eveniment pe care l-am fi putut folosi în mod egal tradus eveniment.

Până acum, am văzut cum sunt declanșate animațiile pe măsură ce navigăm prin diapozitive. Dar dorim și o astfel de animație atunci când caruselul se încarcă inițial. Pentru a implementa această funcție, vom folosi inițializat eveniment.

Iată codul legat de acest eveniment:

/ * trebuie să legați evenimentul inițializat înainte de inițializarea owl (a se vedea demo) * / $ ("owl-carousel") pe ("initialized.owl.carousel", () => setTimeout (() => (".owl-item.active .owl-slide-animated"); addClass ("is-transitioned");, 200););

În cadrul evenimentului, adăugăm este-transitioned clasa elementelor primului diapozitiv.

Este important să rețineți că acest eveniment trebuie atașat înainte de inițializarea caruselului.

Împiedicați saltul paginii la încărcare

Înainte de a merge mai departe, să acoperim un lucru dificil. Dacă te uiți la pagina demo, vei vedea că e a secțiune element definit sub carusel. În mod implicit, până la încărcarea caruselului, se afișează conținutul secțiunii și se întâmplă un salt mic în pagina noastră.

Există două modalități de a repara acest comportament nedorit. Mai întâi, putem adăuga un preloader (am făcut deja acest lucru în tutorialul de tip slick). O a doua opțiune pe care o vom implementa aici este ascunderea secțiune și arătați-o imediat ce caruselul este inițializat.

În ceea ce privește codul, regula necesară este CSS:

secțiune display: none;

Și codul JavaScript:

$ () "setTimeout (() => // alt cod aici $ (" secțiune ") show ();, 200););

Setarea poziției punctelor

Ultimul lucru pe care trebuie să-l facem este să poziționăm navigația cu puncte. În mod prestabilit, este absolut poziționat. Ar trebui să se întâmple următoarele lucruri:

Ar trebui să fie aliniat orizontal cu .bufniță slide-text element al diapozitivului țintă.
Ar trebui să fie poziționat sub acel element cu un decalaj de 20px.

Funcția care rulează și stabilește poziția dorită pentru punctele noastre este setOwlDotsPosition.

Iată următoarea funcție:

funcția setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ țintă);

Aceasta izolează .bufniță slide-text element al diapozitivului activ și îl transmite drept argument pentru doDotsCalculations sub-funcție.

Iată sub-funcția:

funcția doDotsCalculations (el) const height = el.height (); const top, stânga = el.position (); const const = înălțime + vârf + 20; $ (top: '$ res px', stânga: '$ left px'); $ ("owl-carousel .owl-dots");

În cadrul acestei funcții am setat corespunzător top și stânga valori ale .bufniță-puncte element bazat pe înălțimea și poziția elementului țintă.

Catering pentru redimensionarea browserului

Mergeți cu un pas mai departe, poziția punctelor ar trebui actualizată pe măsură ce redimensionăm fereastra browserului. Pentru a realiza acest lucru, vom profita de redimensiona owl eveniment.

Iată codul necesar:

$ owlCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPozi ();, 50););

Poziționarea în funcție de conținut

Nu în ultimul rând, pe măsură ce navigăm prin diapozitive, punctele trebuie repoziționate în funcție de înălțimea și poziția conținutului diapozitivului activ. Mulțumită schimbat din nou, suntem capabili să rezolvăm această nouă cerință.

Iată codul asociat:

$ owlCarousel.on ("changed.owl.carousel", e => // alt cod aici const $ currentOwlItem = $ (". owl-item") eq (e.item.index); const $ target = $ curentOwlItem.find (". owl-slide-text"); doDotsCalculations ($ target););

Pro Tip

Înainte de închidere, să discutăm despre o problemă comună de bufniță. Dacă eliminăm secțiunea care stă sub carusel, bara de derulare verticală dispare șiapare o parte a diapozitivului adiacent.

Pentru a rezolva aceasta, declanșăm reîmprospăta după inițierea caruselului, după cum urmează: $ OwlCarousel.trigger ( "refresh.owl.carousel");

4. Suport pentru browsere

Demo-ul ar trebui să funcționeze bine în toate browserele recente și îl puteți folosi în siguranță în proiectele dvs. Iată un memento a ceea ce am construit:

Concluzie

În acest tutorial amănunțit, am reușit să construim un cursor animat cu ecran complet de carusel cu owl.js. Sperăm că ați câștigat noi abilități pe care le veți putea pune în practică în proiectele viitoare. Ca întotdeauna, dacă aveți întrebări, anunțați-ne în comentariile de mai jos.

Web design