Accentsconagua

Slik bygger du en fullskjerms responsiv karusellskyve med Owl.js

Webdesign
Share

I et tidligere innlegg viste jeg deg hvordan du bygger et tilpasset bildegalleri med slick.js. I dag skal jeg dekke prosessen med å skape en animert, lydhør, fullskjerm karusell glidebryter med owl.js (eller "Owl Carousel")..

Som vanlig, for å få en innledende ide om hva vi skal bygge, ta en titt på den relaterte CodePen-demoen (sjekk ut den større versjonen for en bedre opplevelse):

Hva er Owl Carousel?

Owl.js er et populært jQuery-plugin laget av David Deutch som lar deg bygge attraktive og lydhørlige karuseller. For bedre å forstå hva dette pluginet kan tilby deg, sjekk demoene.

Heldigvis har den stor nettleserstøtte, etter å ha blitt testet på følgende enheter:

  • Chrome
  • Firefox
  • Opera
  • IE7 / 8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

For mer informasjon ta en titt på dokumentasjonen.

Komme i gang med Owl.js

For å komme i gang med ugle, begynn å laste ned og installere følgende filer i prosjektet ditt:

  • jQuery
  • owl.carousel.css eller den minifiserte versjonen
  • owl.carousel.js eller den minifiserte versjonen

Eventuelt vil du kanskje importere owl.theme.default.css fil.

Du kan ta en kopi av de tilsvarende uglefilene ved å besøke Github-repoen, ved å bruke en pakkebehandling (for eksempel npm), eller ved å laste de nødvendige eiendelene gjennom en CDN (for eksempel cdnjs). For denne opplæringen velger jeg det siste alternativet.

I forbindelse med denne opplæringen, utover uglefilene, har jeg også tatt med Babel og Bootstrap 4.

Med det i tankene, hvis du ser under innstillinger fanen i vår demo penn, ser du at jeg har tatt med tre eksterne CSS-filer og to eksterne JavaScript-filer.

1. HTML

For å sparke ting, definerer vi en karusell som har tre lysbilder. Hvert av disse lysbildene inneholder en tittel, en undertekst og en handlingsknapp.

Her er den nødvendige strukturen for vår demo side:

Det er verdt å nevne to ting på dette punktet:

  1. Koden ovenfor bruker Bootstrap 4 klasser. Bootstrap-rammeverket er ikke avgjørende; Jeg inkluderte det bare fordi jeg ønsket å fremskynde CSS-utviklingen.
  2. Jeg har lagt til bakgrunnsbildet til hvert lysbilde gjennom inline-stiler. Mesteparten av tiden, når du arbeider med dynamisk innhold, er dette den vanligste CSS-metoden for å legge til bakgrunnsbilder.

2. CSS

Med HTML-en på plass, la oss se på CSS-stilene vi vil søke på vår side. For enkelhet, diskuterer vi bare en del av de tilgjengelige stilene.

Først definerer vi to egendefinerte egenskaper og to hjelperklasser:

: rot --main-hvit-farge: hvit; --Main-svart-farge: svart;  .statisk posisjon: statisk;  .cover background-size: cover; bakgrunnsposisjon: senter; bakgrunn-gjentak: ikke-gjenta;

Deretter spesifiserer vi stiler for karusellglassene, inkludert overgangene:

.ugle-karusell .owl-slide posisjon: relative; høyde: 100vh; bakgrunnsfarge: lightgray;  .øll-karusell .owl-slide-animated transform: translateX (20px); opasitet: 0; synlighet: skjult; overgang: alle 0,05s;  .øll-karusell .wl-slide-animated.is-transitioned transform: none; opasitet: 1; synlighet: synlig; overgang: alle 0,5s;  .øll-karusell .owl-slide-title.is-overført overgangsforsinkelse: 0.2s;  .øll-karusell .owl-slide-subtitle.is-transitioned overgangsforsinkelse: 0.35s; .-karusell. -lid-slide-cta.is-overført overgangsforsinkelse: 0,5s;

Til slutt bestemmer vi noen regler for navigasjonsmetodene:

.ugle-karusell .øll-prikker ,.-karusell .owl-nav posisjon: absolutt; . -karusell. -pottene. -dot-span bakgrunn: gjennomsiktig; border: 1px solid var (- main-black-color); Overgang: alle 0,2 enkel;  .lås-karusell .lugg-prikker. -lokk-punkt: hover-spenning, .lv-karusell .lugg-prikker .loddot.aktiv span (bakgrunn: var (- svartvann);  .øll-karusell .owl-nav left: 50%; topp 10%; transformere: translateX (-50%); margin: 0;

Merk: Lysbildene skal dekke hele vinduets høyde og vi gir dem derfor høyde: 100vh. Men siden denne enheten er inkonsekvent på tvers av enkelte enheter (for eksempel iOS-enheter), er et annet alternativ å sette lysbildene høyde gjennom JavaScript (se JavaScript-panelet i demoen for mer info).

3. JavaScript

På dette tidspunktet er vi klar til å gjøre oppmerksomheten vår til JavaScript.

Initialisering av karusellen

Som et første skritt, vil vi initialisere karusellen. Som standard gir plugin "dotsnavigasjon", men vår karusell vil også inkludere navigasjonspiler. 

Owl navigasjonsalternativer

Vi aktiverer navigasjonsalternativet gjennom nav konfigurasjonsegenskap. I tillegg definerer vi noen tilpassede SVGer som piler takket være navText konfigurasjonsegenskap.

Koden som brenner karusellen, vises nedenfor:

const $ owlCarousel = $ ("ugle-karusell") .OwlCarousel (elementer: 1, loop: true, nav: true, navText: ['','']);

Legge til animasjoner for å skyve elementer

Som et neste skritt, animerer vi innholdet på hvert lysbilde. Denne oppførselen håndteres gjennom endret hendelse som ugle gir. 

Her er den tilknyttede koden:

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

Så hver gang vi besøker et nytt lysbilde, for det første forsvinner innholdet i alle lysbildene. Deretter vises innholdet i gjeldende lysbilde med en fin lysbilde animasjon.

Merk: i stedet for endret hendelse vi kunne ha brukt like mye oversatt begivenhet.

Så langt har vi sett hvordan animasjonene blir avfyrt når vi sykler gjennom lysbildene. Men vi vil også ha den slags animasjon når karusellen først laster. For å implementere denne funksjonaliteten bruker vi initialisert begivenhet.

Her er koden knyttet til denne hendelsen:

/ * du må binde initialisert hendelse før ugles initialisering (se demo) * / $ ("ugle-karusell"). På ("initialized.owl.carousel", () => setTimeout (() => $ (".owl-item.active .owl-slide-animated"). addClass ("is-transitioned");, 200););

I den hendelsen legger vi til er-overført klasse til elementene i første lysbilde.

Det er viktig å merke seg at denne hendelsen må festes før karusellens initialisering.

Forhindre siden Jump on Load

Før du går videre, la oss dekke en vanskelig ting. Hvis du ser på demosiden, ser du at det er en seksjon element definert under karusellen. Som standard, til karusellen laster, vises seksjonsinnholdet og det skjer et lite hopp på vår side. 

Det er to måter å fikse denne uønskede oppførelsen på. Først kan vi legge til en forhåndsinnlaster (det gjorde vi allerede i den slick-relaterte opplæringen). Et annet alternativ som vi skal implementere her er å skjule seksjon og vis det så snart karusellen er initialisert.

Når det gjelder kode, er CSS-regelen nødvendig:

seksjon display: none;

Og JavaScript-koden:

$ ("ugle-karusell"). På ("initialized.owl.carousel", () => setTimeout (() => // annen kode her $ ("section"). 200););

Stille prikkposisjonen

Det siste vi må gjøre er å plassere prikknavigasjonen. Som standard er den helt posisjonert. Følgende ting skal skje:

  1. Den skal justeres horisontalt med .ugle-slide-tekst element i målruten. 
  2. Den bør plasseres under det elementet med et 20px topp gap.

Funksjonen som kjører og setter ønsket posisjon for prikkene våre er setOwlDotsPosition.

Her er den funksjonen:

funksjon setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ mål);

Dette isolerer .ugle-slide-tekst element i det aktive lysbildet og overfører det som et argument til doDotsCalculations  underfunksjon.

Her er den delfunksjonen:

funksjon doDotsCalculations (el) const height = el.height (); const topp, venstre = el.position (); const res = høyde + topp + 20; $ ("ugle-carousel .owl-dots"). css (top: '$ res px', venstre: '$ left px');

Innenfor denne funksjonen setter vi det riktige topp og venstre verdier av .ugle-prikker element basert på målelementets høyde og posisjon. 

Catering for nettleserendring

Går et skritt videre, bør punktene posisjoneres når vi endrer størrelsen på nettleservinduet. For å oppnå dette, utnytter vi endre størrelse på ugle hendelse.

Her er den nødvendige koden:

$ ugleCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPosition ();, 50););

Posisjonering Avhengig av innholdet

Sist men ikke minst, når vi navigerer gjennom lysbildene, må prikkene flyttes avhengig av høyden og posisjonen til innholdet i den aktive lysbilden. Takk til endret hendelsen igjen, vi er i stand til å løse det nye kravet.

Her er den relaterte koden:

$ owlCarousel.on ("changed.owl.carousel", e => // annen kode her const $ currentOwlItem = $ ("ugle-element"). eq (e.item.index); const $ target = $ currentOwlItem.find ("ugle-slide-text"); doDotsCalculations ($ target););

Pro Tips

Før du lukker, la oss diskutere en vanlig uglebug. Hvis vi fjerner delen som sitter under karusellen, forsvinner den vertikale rullefeltet ogen del av det tilstøtende lysbildet vises.

For å fikse dette, utløser vi forfriske hendelse etter karusellinitialiseringen, slik: $ OwlCarousel.trigger ( "refresh.owl.carousel");

4. Nettleserstøtte

Demoen skal fungere godt i alle nyere nettlesere, og du kan trygt bruke den i prosjektene dine. Her er en påminnelse om hva vi har bygget:

Konklusjon

I denne grundige opplæringen klarte vi å bygge en animert fullskjerm karusell glidebryter med owl.js. Forhåpentligvis har du oppnådd noen nye ferdigheter som du vil kunne sette i bruk i kommende prosjekter. Som alltid, hvis du har noen spørsmål, gi meg beskjed i kommentarene nedenfor.

Webdesign
×