Mange på deres egen side ønsker å se glidebrytere – dette er blokker som viser ett innholdselement på skjermen, og etter en viss tid endrer dette innholdet til et annet. Naturligvis kan hver nettutvikler uavhengig lage en skyveknapp ved hjelp av HTML, CSS og JavaScript, men dette gir ikke alltid mening. 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 siden mye mer attraktiv. Denne artikkelen vil fokusere på en av disse løsningene k alt Owl Carousel. Å sette opp denne glideren er utrolig enkel, så selv en nybegynner kan håndtere det. Nå vil du lære hva denne glideren er, samt andre viktige detaljer. Å sette opp Owl Carousel er en trinnvis prosess, så du bør kun studere dette materialet i rekkefølge.
Hva er det og hvorfor bør du velge akkurat denne glideren?
Owl Carousel, hvis konfigurasjon vil bli diskutert i denne artikkelen, er en veldig effektiv plugin som legger til en vakker og praktisk glidebryter til siden din, noe som i stor grad vil lette arbeidet ditt på nettstedet,sparer mye tid, krefter og penger. Hva er fordelene med denne spesielle plugin, fordi det er ganske mange skyveknapper på nettet? Faktum er at denne glidebryteren tilbyr dusinvis av tilpasnings alternativer, som lar deg gjøre siden din unik og uforlignelig. Det er en responsiv plugin som fungerer på alle nettleserversjoner og kan enkelt kobles til WordPress og andre populære CMS. Generelt har denne glideren mange fordeler, så du bør definitivt ta et valg til fordel for den. Men før du begynner å sette opp Owl Carousel, må denne plugin-en fortsatt lastes.
Last ned
Å sette opp Owl Carousel 2 er ikke mulig hvis du ikke har lastet den ned til datamaskinen din, og siden dette er en trinn-for-trinn-instruksjon, bør du starte helt fra begynnelsen. Så programmet kan lastes ned ved hjelp av pakkeadministratorer, men dette er avanserte utviklerverktøy, så her vil vi fortelle deg hvordan du får tak i denne plugin på standard måte. Du må gå til den offisielle nettsiden til plugin-en og laste ned den nyeste versjonen. Etter det må alle nedlastede filer overføres til katalogen på nettstedet ditt, etter å ha forberedt en praktisk mappe, som heter det samme som selve plugin-modulen. Merk at denne plugin-modulen er buntet med jQuery, så du må ha det biblioteket tilgjengelig også. Vel, når du har lastet ned denne plugin-modulen, må du ta deg av neste trinn som er å sette opp Owl Carousel-glidebryteren 2.
CSS
BOwl Carousel 1.3-innstillingene forblir nesten de samme som i den nyere versjonen 2, bare nye funksjoner legges til. Den grunnleggende informasjonen vil imidlertid være den samme, og begynner med å legge til CSS i dokumentet ditt. Så det første trinnet er å legge til linjen. Hva gir hun deg? Dette er en streng som laster de nødvendige stilene til nettstedet for å vise glidebryteren. Det er her du kan avslutte med å gjøre den visuelle behandlingen selv. Det finnes imidlertid en mer praktisk og raskere løsning. Du kan også legge til en linje som også laster inn glidebryterens standardtema, noe som gjør den umiddelbart klar til bruk. Du kan redigere noen av stilene for å gjøre glidebryteren mer unik og annerledes, og mer egnet for innholdet ditt. Naturligvis ville Owl Carousel-innstillingene på russisk være veldig praktiske, men enhver person som lager nettsider bør forstå at han ikke kan klare seg uten kunnskap i engelsk.
JavaSript-tilkobling
Selvfølgelig vil ikke glidebryteren fungere uten JS, så du bør også passe på å inkludere den riktige filen som inneholder den nødvendige koden. For å gjøre dette må du sette inn en kodelinje fra dokumentasjonen, men en betingelse må være oppfylt. Alle vet at JS er et programmeringsspråk som utfører alle kommandoer i rekkefølge, så i dette tilfellet bør du legge til denne kodelinjen etter linjen som legger til jQuery-biblioteket i dokumentet ditt. Mer med JS når det gjelder denne glideren, har du ingenting å gjøretrenger.
HTML-koding
Vel, du har koblet til glidebryteren, nå er det på tide å designe og tilpasse den. Først av alt må du skrive HTML-koden for at glidebryteren i det hele tatt skal vises på siden din. For å gjøre dette må du lage en beholder som inneholder lysbildene. Dette kan gjøres ved å bruke div-taggen, som må tildeles ugle-karusellklassen. Det er denne klassen som sørger for at alle stiler relatert til glidebryteren blir aktivert. Du kan også skrive en annen klasse - ugle-tema. Det vil komme godt med hvis du bestemmer deg for å bruke standarddesignet eller ta standardversjonen av glidebryteren som grunnlag for videre arbeid.
Deretter må du legge til hvert lysbilde i en egen beholder med en div-tag. Selvfølgelig kan du bruke andre tagger, men denne taggen er den beste for glidere.
Call-plugin
Og det siste du trenger å gjøre for å ha en ferdig skyveknapp på nettstedet ditt, er å bruke denne kodeblokken:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Den sikrer at glidebryteren begynner å fungere, dvs. bla gjennom innholdet, når siden din lastes inn. Med samme kode kan du koble Owl Carousel til WordPress. Innstillingene til denne plugin-modulen er mange og varierte, og nå vil du lære om de viktigste punktene.
Angi utseendet og funksjonaliteten til glidebryteren
Så hvilke kommandoer kan du bruke for å tilpasse glidebryteren? Først av alt må du huske elementer-kommandoen, for med den kan du angi et spesifikt antall lysbilder i glidebryteren. Løkkekommandoen lar deg velge om du vil løkke glidebryteren eller slutte å rulle ved det siste elementet. Det er også Dra-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 din kan sveipes med musen holdt nede, og i det andre tilfellet ved hjelp av en berøring (denne kommandoen passer for mobile enheter). En annen viktig kommando er nav, som muliggjør visning av navigasjonspiler. Sammen med den kan du bruke navText-kommandoen til å legge til etiketter på navigasjonsknapper. Du bør heller ikke glemme autoplay-kommandoen, som lar deg aktivere og deaktivere den automatiske starten av å snu lysbildene på glidebryteren når siden lastes. Med denne kommandoen kan du også bruke autoplayTimeout, hvor du kan angi en spesifikk verdi i millisekunder, som vil bestemme tiden mellom den automatiske vendingen av hvert av lysbildene.
Hvis du bruker responsiv webdesign, det vil si at utformingen av siden din endres automatisk avhengig av hvilken enhet den vises på, så må du definitivt huske den responsive kommandoen, som lar deg angi antall lysbilder for å vise avhengig av bredden på skjermen siden vises på.
