Owl Carousel: oppsett og tilkobling

Mange mennesker på egen nettside vil seSkyvekontrollene er slike blokker som viser ett element av innhold på skjermen, og etter en viss periode endrer de dette innholdet til et annet. Naturligvis er hver webutvikler i stand til å lage en skyveknapp på egen hånd ved hjelp av HTML, CSS og JavaScript, men dette gir ikke alltid mening. Du vil tilbringe ganske mye tid, selv om det er ganske mange ferdige løsninger på Internett som i stor grad letter livet ditt og gjør nettstedet ditt mye mer attraktivt. I denne artikkelen vil vi diskutere en av disse løsningene, kalt Owl Carousel. Å sette opp denne skyveknappen er utrolig enkel, så selv en nybegynner kan takle det. Nå vil du finne ut hva denne skyveknappen representerer, så vel som andre viktige detaljer. Oppsett av uglekarusell gjøres trinnvis, så du bør bare studere dette materialet i orden.

Hva er det, og hvorfor er det verdt å velge denne skyveknappen?

Owl Carousel, hvis innstilling vil værevurdert i denne artikkelen, er det en svært effektiv plugin som legger til side hyggelig og hendig skyveknapp, som er mye enklere for deg å arbeide på området, vil spare mye tid, krefter og penger. Hva er fordelene med denne plugin-modulen, fordi det er mange skyveknapper på nettet? Faktum er at denne skyveknappen gir deg flere dusinvis av muligheter for tilpasning, noe som gjør at du kan gjøre siden din unik og uopprettelig. Dette er et adaptivt plugin som vil fungere på alle versjoner av nettlesere, og det kan enkelt kobles til WordPress og andre populære CMS. Generelt er fordelene med denne glidebryteren veldig mye, så du bør definitivt gjøre et valg i sin favør. Før du begynner å konfigurere Owl Carousel, må denne plugin-modulen lastes ned.

nedlasting

Sette opp Owl Carousel 2 er ikke mulig hvis du ikke gjør detlastet den ned til datamaskinen din, og siden dette er en trinnvis instruksjon, er det verdt å starte fra begynnelsen. Så kan programmet lastes ned ved hjelp av pakkeforvaltere, men dette er avanserte utviklerverktøy, så her blir det fortalt hvordan man får dette pluginet på standard måte. Du må gå til det offisielle nettstedet til pluginet og laste ned den nyeste versjonen. Deretter skal alle de nedlastede filene overføres til katalogen på nettstedet ditt, og utarbeide en praktisk mappe, som kalles det samme som selve plugin-modulen. Merk at dette pluginet er knyttet til jQuery, så du må også ha dette biblioteket tilgjengelig. Vel, når du laster ned denne plugin-modulen, må du ta det neste trinnet, nemlig skyveinnstillingen for Uwl Carousel 2.

CSS

I ugle karusell 1.3 innstillinger forblir nesten det samme som i den nyere andre versjonen, bare nye funksjoner blir lagt til. Den grunnleggende informasjonen vil imidlertid være den samme, og begynner med å legge til CSS i dokumentet. Så det første trinnet er å legge til en linje i HTML-koden <link rel = "stylesheet" href = "owlcarousel / owl.carousel.min.css">. Hva gir det deg? Dette er en streng som laster de nødvendige stilene på nettstedet for å vise skyveknappen. På dette kan du fullføre, gjøre visuell behandling selv. Det er imidlertid en mer praktisk og rask løsning. Du kan også legge til en linje <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">, som også laster et standard temaskyveknapp, som gjør det umiddelbart klar til bruk. Du kan redigere noen stiler ved å gjøre glidebryteren mer unik og uvanlig, og også mer egnet for innholdet ditt. Naturligvis vil innstillingen av Owl Carousel på russisk være veldig praktisk, men hver person som lager nettsteder skal forstå at uten å vite engelsk, kan han ikke gjøre det.

Koble til JavaSpript

Naturligvis vil glidebryteren ikke fungere uten JS,så du må også ta vare på å koble til den aktuelle filen som inneholder den nødvendige koden. For å gjøre dette må du sette inn en linje med kode fra dokumentasjonen, men med obligatorisk overholdelse av en betingelse. Alle vet at JS er et programmeringsspråk som utfører alle kommandoer i henhold til hverandre. I dette tilfellet bør du legge til denne koden etter linjen som legger til jQuery-biblioteket i dokumentet. Mer med JS i tilfelle av denne glideren trenger du ikke å gjøre noe.

Lag HTML-kode

Vel, du hekta skyveknappen, nå er det på tidedet å utstede og justere. Først og fremst må du skrive HTML-kode slik at skyveknappen vanligvis vises på siden din. For å gjøre dette må du opprette en container, som vil inneholde lysbildene. Du kan gjøre dette ved å bruke div-taggen, som du vil tildele til ugle-karusellklassen. Det er denne klassen som sikrer at alle stiler som er relatert til skyveknappen, blir aktivert. Du kan også registrere en annen klasse - ugle-tema. Det er nyttig for deg hvis du bestemmer deg for å bruke standarddesignet eller ta en standardversjon av skyvekontrollen som grunnlag for videre arbeid.

Deretter må du legge til hvert lysbilde i en separat beholder med en div-tagg. Naturligvis kan du bruke andre tagger, men det beste for skyvekontrollene er denne taggen.

Ring pluginet

Vel, det siste du må gjøre for at nettstedet ditt skal ha en ferdig slider, er å bruke denne koden:

$ (dokument) .ready (funksjon () {

$ (".wl-karusell"). owlCarousel ();

});

Det sikrer at glidebryteren starterfunksjon, det vil si, bla innhold når siden laster. Med samme kode kan du koble Owl Carousel til WordPress. Innstillingene for denne plugin er mange og mangfoldige, og nå vil du lære om de viktigste punktene.

Justere utseendet og funksjonaliteten til skyveknappen

Så, hvilke kommandoer kan du bruke,å justere skyveknappen din? Først og fremst må du huske kommandoen, siden du kan spesifisere et bestemt antall lysbilder i glidebryteren. Sløyfe-kommandoen lar deg velge om du vil gå i glidebryteren, eller for å slutte å rulle på det siste elementet. Det er også kommandoen Dra, som har flere alternativer, for eksempel mus og berøring. I det første tilfellet kan du gjøre at elementene i skyvekontrollen kan rulles med en klippet mus, og i andre tilfelle - med berøring (denne kommandoen passer for mobile enheter). En annen viktig kommando er nav, som inkluderer visning av navigasjonspiler. Sammen med det kan du bruke kommandoen navText, og legge til etiketter på navigasjonsknappene. Du bør heller ikke glemme autoplay-kommandoen, som lar deg slå på og av automatisk start av lysbildefremvisningen av skyveknappen når siden er lastet inn. Sammen med denne kommandoen kan du også bruke autoplayTimeout, som du kan angi en bestemt verdi i millisekunder som bestemmer tiden mellom automatisk blending av hvert lysbilde.

Hvis du bruker adaptivt webdesign, såUtformingen av siden din endres automatisk, avhengig av hvilken enhet den vises på, da må du huske om den responsive kommandoen, som lar deg angi antall viste lysbilder avhengig av bredden på skjermen som siden vises.