Mange mennesker på deres egen side vil seskyvekontrollene er blokker som viser ett element med innhold på skjermen, og etter en viss tidsperiode endrer de dette innholdet til et annet. Naturligvis kan hver webutvikler uavhengig lage en glidebryter ved hjelp av HTML, CSS og JavaScript, men dette er ikke alltid tilfelle. Du vil bruke ganske mye tid, til tross for at det finnes ganske mange ferdige løsninger på Internett som gjør livet ditt mye enklere og gjør nettstedet ditt mye mer attraktivt. Denne artikkelen vil fokusere på en av disse løsningene kalt Owl Carousel. Å sette opp denne glidebryteren er utrolig enkel, så selv en nybegynner takler det. Nå vil du finne ut hva denne glidebryteren er, i tillegg til andre viktige detaljer. Owl Carousel er satt opp trinn for trinn, så du bør bare studere dette materialet i rekkefølge.
Hva er det, og hvorfor er det verdt å velge denne glidebryteren?
Owl Carousel, som vil bli konfigurertbetraktet i denne artikkelen er en veldig effektiv plugin som tilfører en vakker og praktisk glidebryter på siden din, noe som i stor grad vil gjøre det lettere for deg å jobbe på nettstedet, og spare deg for mye tid, krefter og penger. Hva er fordelene med denne spesielle plugin-en, fordi det er ganske mange glidebrytere på nettet? Fakta er at denne glidebryteren tilbyr deg flere titalls tilpasningsalternativer, som lar deg gjøre siden din unik og ufravikelig. Dette er en adaptiv plugin som vil fungere på alle versjoner av nettlesere, og den kan også enkelt kobles til WordPress og andre populære CMS. Generelt har denne glidebryteren mange fordeler, så du bør absolutt ta et valg til fordel. Før du begynner å sette opp Owl Carousel, må denne plugin likevel lastes ned.
nedlasting
Owl Carousel 2 kan ikke konfigureres hvis du ikke er detlastet den ned til datamaskinen din, og siden dette er en trinnvis instruksjon, er det verdt å starte helt fra begynnelsen. Så programmet kan lastes ned ved hjelp av pakkehåndterere, men dette er avanserte utviklerverktøy, så det vil forklare hvordan du får denne plugin på en standard måte. Du må gå til plugins offisielle nettsted og laste ned den nyeste versjonen. Etter det må alle nedlastede filer overføres til katalogen til nettstedet ditt, etter å ha utarbeidet en praktisk mappe, som kalles det samme som selve pluginen. Vær oppmerksom på at denne pluginen er tilknyttet jQuery, så du må også ha dette biblioteket tilgjengelig. Når du laster ned denne pluginen, må du gjøre det neste trinn, nemlig å sette opp glidebryteren Owl Carousel 2.
CSS
I Owl Carousel 1.3 innstillinger forblir nesten de samme som i den nyere andre versjonen, bare nye funksjoner legges til. Den grunnleggende informasjonen vil imidlertid være den samme fra og med å legge CSS til dokumentet ditt. Så det første trinnet er å legge til en linje til HTML-koden . Hva gir hun deg?Dette er linjen som laster opp de nødvendige stilene til nettstedet for å vise glidebryteren. Du kan avslutte dette med å gjøre visuell prosessering selv. Imidlertid er det en mer praktisk og rask løsning. Du kan også legge til en linje , som også laster ned et standardtemaglidebryteren, som gjør den umiddelbart klar til bruk. Du kan redigere noen stiler, noe som gjør glidebryteren mer unik og uvanlig, samt mer egnet for innholdet ditt. Naturligvis ville Owl Carousel-innstillingene på russisk være veldig praktisk, men hver person som oppretter nettsteder, bør forstå at han ikke kan klare seg uten engelsk.
JavaScript-tilkobling
Naturligvis vil glidebryteren ikke fungere uten JS,Derfor må du også passe på å inkludere riktig fil som inneholder den nødvendige koden. For å gjøre dette, må du sette inn en kodelinje fra dokumentasjonen imidlertid under en betingelse.Alle vet at JS er et programmeringsspråk som utfører alle kommandoer i henhold til rekkefølge. I dette tilfellet bør du legge til denne kodelinjen etter linjen som legger jQuery-biblioteket til dokumentet. Du trenger ikke å gjøre noe mer med JS for denne glidebryteren.
HTML-kodelayout
Vel, du koblet glidebryteren, nå er det på tideå utstede og konfigurere det. Først av alt må du skrive HTML-kode for å få glidebryteren til å vises på siden din. For å gjøre dette, må du lage en beholder som inneholder lysbilder. Dette kan gjøres ved å bruke div-koden, som må tildeles uglekarusellklassen. Det er denne klassen som sikrer at alle stiler som tilhører glidebryteren blir aktivert. Du kan også registrere en annen klasse - ugle-tema. Det vil være nyttig for deg hvis du bestemmer deg for å bruke standardutformingen, eller hvis du tok standardversjonen av glidebryteren som grunnlag for videre arbeid.
Deretter må du legge til hvert lysbilde i en separat beholder med en div-kode. Naturligvis kan du bruke andre tagger, men denne koden egner seg best når det gjelder glidebrytere.
Plugin samtale
Det siste du trenger å gjøre for å få en ferdig glidebryter til å vises på nettstedet ditt, er å bruke denne kodeblokken:
$ (dokument). allerede (funksjon () {
$ (". ugle-karusell"). ugle karusell ();
});
Det sikrer at glidebryteren starterfunksjon, det vil si bla i innholdet når siden lastes inn. Ved hjelp av samme kode kan du koble Owl Carousel til WordPress. Innstillingene for denne plugin-en er mange og varierte, og nå lærer du de mest viktige punktene.
Angi utseendet og funksjonaliteten til glidebryteren
Så hvilke kommandoer kan du bruke,å tilpasse glidebryteren? Først av alt må du huske elementkommandoen, siden du med den kan angi et spesifikt antall lysbilder i glidebryteren. Loop-kommandoen lar deg velge om glidebryteren skal sløyfes, eller slutte å rulle om det siste elementet. Det er også Drag-kommandoen, som har flere alternativer, for eksempel mus og berøring. I det første tilfellet kan du gjøre det slik at elementene i glidebryteren kan vendes med den klemte musen, og i det andre tilfellet ved å berøre (denne kommandoen er egnet for mobile enheter). En annen viktig kommando er nav, som muliggjør visning av navigasjonspiler. Sammen med den kan du bruke navText-kommandoen og legge til bildetekster på navigasjonsknappene. Du bør heller ikke glemme autoplay-kommandoen, som lar deg slå av og på den automatiske starten av å vri på lysbildene på glidebryteren når siden lastes inn. Sammen med denne kommandoen kan du også bruke autoplayTimeout, som du kan angi en spesifikk verdi for i millisekunder, som vil bestemme tiden mellom automatisk rulle gjennom hver av lysbildene.
Hvis du bruker responsiv webdesign, daHvis utformingen av siden din automatisk endres avhengig av hvilken enhet den blir sett på, må du absolutt huske den responsive kommandoen, som lar deg stille inn antall viste lysbilder avhengig av bredden på skjermen som siden vises på.
