Share
I ett tidigare inlägg visade jag dig hur du skapar ett anpassat bildgalleri med slick.js. Idag täcker jag processen med att skapa en animerad, lyhörd, fullskärmsladdare med owl.js (eller "Owl Carousel").
Som vanligt, för att få en första uppfattning om vad vi ska bygga, ta en titt på den relaterade CodePen-demoen (kolla in den större versionen för en bättre upplevelse):
Owl.js är ett populärt jQuery-plugin skapat av David Deutch som låter dig bygga attraktiva och lyhörda karuseller. För att bättre förstå vad det här pluginet kan erbjuda dig, kolla in demonerna.
Lyckligtvis nog har det bra webbläsarstöd, som har testats på följande enheter:
För mer information ta en titt på dokumentationen.
För att komma igång med uggla börjar du genom att hämta och installera följande filer i ditt projekt:
Accentsconagua
owl.carousel.css eller dess minifierade versionowl.carousel.js eller dess minifierade versionEventuellt kan du importera owl.theme.default.css fil.
Du kan ta en kopia av motsvarande ugilfiler genom att besöka dess Github repo, genom att använda en pakethanterare (t ex npm) eller genom att ladda de nödvändiga tillgångarna via en CDN (t ex cdnjs). För den här handledningen väljer jag det sista alternativet.
För syftet med denna handledning, bortom owlfilerna, har jag också tagit med Babel och Bootstrap 4.
Med det i åtanke, om du tittar under inställningar fliken i vår demopenna ser du att jag har inkluderat tre externa CSS-filer och två externa JavaScript-filer.
För att sparka bort saker definierar vi en karusell som har tre bilder. Var och en av dessa diabilder innehåller en titel, en undertext och en uppmaningsknapp.
Här är den nödvändiga strukturen för vår demosida:
Det är värt att nämna två saker på den här tiden:
Med HTML-filen på plats, låt oss titta på CSS-formaten som vi ska söka på vår sida. För enkelhet diskuterar vi bara en del av de tillgängliga stilar.
Först definierar vi två anpassade egenskaper och två hjälparklasser:
: root --main-white-color: white; --Main-svart-färg: svart; .static position: static; .cover background-size: cover; bakgrundsställning: center; background-repeat: no-repeat;
Därefter specificerar vi stilar för karusellrutorna, inklusive övergångarna:
.uggla-carousel.owl-slide position: relative; höjd: 100vh; bakgrundsfärg: lightgray; .cirkel-carousel.owl-slide-animated transform: translateX (20px); opacitet: 0; synlighet: gömd; övergång: alla 0,05s; .Wall-carousel.owl-slide-animated.is-transitioned transform: none; opacitet: 1; synlighet: synlig övergång: alla 0,5s; .wl-carousel .wl-slide-title.is-transitioned övergångsfördröjning: 0.2s; .ö-karusell .överskridande -titel.transformerad övergångsfördröjning: 0,35s; .Wall-carousel .wl-slide-cta.is-transitioned övergångsfördröjning: 0.5s;
Slutligen ställer vi några regler för navigeringsmetoderna:
.uggla-carousel. -pinnar ,.-karusell.owl-nav position: absolut; .Wall-carousel.owl-dots .owl-dot span background: transparent; gränsen: 1px solid var (- svartvitt); övergång: alla 0.2s lätt; . -karusell. -pinnar. -prop-punkt: svängspännare,. -karusell. -pottar. -dot.aktiv span bakgrund: var (- svartvitt); .ö-karusell .owl-nav vänster: 50%; topp 10%; transformera: translateX (-50%); marginal: 0;
Notera: Skivorna ska täcka hela fönsterdjupet och vi ger dem därför höjd: 100vh. Eftersom denna enhet är inkonsekvent över vissa enheter (t.ex. iOS-enheter), är det dock ett annat alternativ att ställa in diabildernas höjd genom JavaScript (se demo-panelen för mer information).
Vid denna tidpunkt är vi redo att rikta vår uppmärksamhet åt JavaScript.
Som ett första steg initierar vi karusellen. Som standard tillhandahåller plugin "pricknavigering", men vår karusell kommer även att innehålla navigationspilar.
OwlnavigationsalternativVi aktiverar navigationsalternativet via nav konfigurationsegenskap. Dessutom definierar vi några anpassade SVG som pilar tack vare Navtext konfigurationsegenskap.
Koden som bränner karusellen visas nedan:
const $ owlCarousel = $ ("uggla-carousel"). owlCarousel (objekt: 1, loop: true, nav: true, navText: ['','']);Som ett nästa steg animerar vi innehållet i varje bild. Detta beteende hanteras genom ändrats händelse som uggla ger.
Här är den tillhörande koden:
$ owlCarousel.on ("changed.owl.carousel", e => $ ("uggla-animerad"). removeClass ("is-transitioned"); const $ currentOwlItem = $ ) .eq (e.item.index); $ currentOwlItem.find ("uggla-animerad"). addClass ("is-transitioned");); Så vi försöker varje gång vi besöker en ny bild, för det första försvinner innehållet i alla bilder. Därefter visas innehållet i den aktuella bilden med en snygg inskjutningsanimation.
Notera: istället för ändrats händelse vi kunde ha lika använt översatt händelse.
Hittills har vi sett hur animationerna avfyras när vi cyklar genom bilderna. Men vi vill också ha den typen av animering när karusellen initialt laddas. För att implementera denna funktionalitet använder vi initialiseras händelse.
Här är koden relaterad till den här händelsen:
/ * du måste binda initialiserad händelse före owlens initialisering (se demo) * / $ ("uggla-karusell") på ("initialized.owl.carousel", () => setTimeout (() => $ (".owl-item.active .owl-slide-animated"). addClass ("is-transitioned");, 200););Inom den händelsen lägger vi till är-transitioned klass till elementen i den första bilden.
Det är viktigt att notera att denna händelse måste bifogas före karusellens initialisering.
Innan vi går vidare, låt oss täcka en knepig sak. Om du tittar på demosidan ser du att det finns en sektion element definierat under karusellen. Som standard, tills karusellen fyller, visas sektionsinnehållet och ett litet hoppa sker på vår sida.
Det finns två sätt att åtgärda detta oönskade beteende. Först kan vi lägga till en preloader (det gjorde vi redan i den slickrelaterade handledningen). Ett andra alternativ som vi ska implementera här är att dölja sektion och visa det så snart karusellen initieras.
När det gäller kod krävs den CSS-regel som är den här:
avsnitt display: none;
Och JavaScript-koden:
$ ("uggla-karusell"). På ("initialized.owl.carousel", () => setTimeout (() => // annan kod här $ ("section"). 200););Det sista vi behöver göra är att placera punkterna navigation. Som standard är den helt placerad. Följande saker bör hända:
.uggla-slide-text del av målglaset. Funktionen som körs och ställer in önskad position för våra prickar är setOwlDotsPosition.
Här är den funktionen:
funktion setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ mål); Detta isolerar .uggla-slide-text elementet i den aktiva bilden och skickar den som ett argument till doDotsCalculations underfunktion.
Här är den delfunktionen:
funktion doDotsCalculations (el) const height = el.height (); const topp, vänster = el.position (); const res = höjd + topp + 20; $ ("uggla-carousel .owl-dots"). css (top: '$ res px', vänster: '$ left px'); Inne i den här funktionen ställer vi in lämpliga topp och vänster värden av .owl-dots element baserat på målelementets höjd och position.
Går ett steg längre, bör prickarnas position uppdateras när vi ändrar storleken på webbläsarfönstret. För att uppnå detta utnyttjar vi ändra storlek uggla händelse.
Här är den nödvändiga koden:
$ owlCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPosition ();, 50););Sist men inte minst, när vi navigerar genom bilderna måste punkterna flyttas beroende på höjden och positionen av innehållet i den aktiva bilden. Tack vare ändrats händelse igen, vi kan lösa det nya kravet.
Här är den relaterade koden:
$ owlCarousel.on ("changed.owl.carousel", e => // annan kod här const $ currentOwlItem = $ ("owl-item"). eq (e.item.index); const $ target = $ currentOwlItem.find ("ugla-slide-text"); doDotsCalculations ($ target););Innan du stänger, låt oss diskutera en vanlig uggla. Om vi tar bort det avsnitt som sitter under karusellen, försvinner den vertikala rullningsfältet ochEn del av den intilliggande bilden visas.
För att åtgärda detta utlöser vi refresh händelse efter karusellinitialiseringen, så här: $ OwlCarousel.trigger ( "refresh.owl.carousel");
Demon ska fungera bra i alla nya webbläsare och du kan använda det säkert i dina projekt. Här är en påminnelse om vad vi har byggt:
I den här noggranna handledningen lyckades vi bygga en animerad fullskärmsladdare med owl.js. Förhoppningsvis har du fått några nya färdigheter som du kommer att kunna genomföra i dina kommande projekt. Som alltid, om du har några frågor, låt mig veta i kommentarerna nedan.
