Mange mennesker på deres eget websted ønsker at se skydere - det er blokke, der viser et indholdselement på skærmen, og efter en vis periode ændrer dette indhold til et andet. Naturligvis er enhver webudvikler i stand til selvstændigt at oprette en skyder ved hjælp af HTML, CSS og JavaScript, men det giver ikke altid mening. Du kommer til at bruge ret meget tid, på trods af at der findes en del færdige løsninger på internettet, som gør dit liv meget nemmere og gør dit websted meget mere attraktivt. Denne artikel vil fokusere på en af disse løsninger kaldet Owl Carousel. Opsætningen af denne skyder er utrolig enkel, så selv en nybegynder kan klare det. Nu vil du lære, hvad denne skyder er, samt andre vigtige detaljer. Opsætning af uglekarrusel er en trin-for-trin proces, så du bør kun studere dette materiale i rækkefølge.
Hvad er det, og hvorfor skal du vælge netop denne skyder?
Owl Carousel, hvis konfiguration vil blive diskuteret i denne artikel, er et meget effektivt plugin, der tilføjer en smuk og praktisk skyder til din side, som i høj grad vil lette dit arbejde på webstedet,sparer en masse tid, kræfter og penge. Hvad er fordelene ved dette særlige plugin, fordi der er ret mange skydere på nettet? Faktum er, at denne skyder tilbyder dig snesevis af tilpasningsmuligheder, som giver dig mulighed for at gøre din side unik og uforlignelig. Det er et responsivt plugin, der fungerer på alle browserversioner og nemt kan forbindes til WordPress og andre populære CMS. Generelt har denne skyder en masse fordele, så du bør absolut træffe et valg til dens fordel. Men før du begynder at konfigurere Owl Carousel, skal dette plugin stadig indlæses.
Download
Opsætning af Owl Carousel 2 er ikke muligt, hvis du ikke har downloadet den til din computer, og da dette er en trin-for-trin instruktion, bør du starte helt fra begyndelsen. Så programmet kan downloades ved hjælp af pakkeadministratorer, men det er avancerede udviklerværktøjer, så her vil vi fortælle dig, hvordan du får dette plugin på standardmåden. Du skal gå til den officielle hjemmeside for plugin og downloade dens seneste version. Derefter skal alle downloadede filer overføres til biblioteket på dit websted, efter at have forberedt en praktisk mappe, som hedder det samme som selve plugin'et. Bemærk, at dette plugin er bundtet med jQuery, så du skal også have det bibliotek tilgængeligt. Nå, når du har downloadet dette plugin, skal du tage dig af det næste trin, som er at opsætte Owl Carousel-skyderen 2.
CSS
BOwl Carousel 1.3 indstillinger forbliver næsten de samme som i den nyere version 2, kun nye funktioner tilføjes. De grundlæggende oplysninger vil dog være de samme, begyndende med at tilføje CSS til dit dokument. Så det første skridt er at tilføje linjen. Hvad giver hun dig? Dette er en streng, der indlæser de nødvendige stilarter til webstedet for at vise skyderen. Det er her, du kan afslutte med selv at lave den visuelle behandling. Der er dog en mere bekvem og hurtigere løsning. Du kan også tilføje en linje, der også indlæser skyderens standardtema, så den er klar til brug med det samme. Du kan redigere nogle af stilene for at gøre din skyder mere unik og anderledes og mere egnet til dit indhold. Naturligvis ville indstillingerne for Owl Carousel på russisk være meget praktiske, men enhver person, der opretter websteder, bør forstå, at han ikke kan undvære kendskab til engelsk.
JavaSript-forbindelse
Selvfølgelig vil skyderen ikke fungere uden JS, så du bør også sørge for at inkludere den relevante fil, der indeholder den nødvendige kode. For at gøre dette skal du indsætte en kodelinje fra dokumentationen, dog skal en betingelse være opfyldt. Alle ved, at JS er et programmeringssprog, der udfører alle kommandoer i rækkefølge, så i dette tilfælde bør du tilføje denne kodelinje efter den linje, der tilføjer jQuery-biblioteket til dit dokument. Mere med JS i tilfælde af denne skyder, du har intet at gørebehov.
HTML-kodning
Nå, du har tilsluttet skyderen, nu er det tid til at designe og tilpasse den. Først og fremmest skal du skrive HTML-koden for at skyderen overhovedet vises på din side. For at gøre dette skal du oprette en beholder, der skal indeholde diasene. Dette kan gøres ved at bruge div-tagget, som skal tildeles ugle-karrusel-klassen. Det er denne klasse, der sikrer, at alle stilarter relateret til skyderen bliver aktiveret. Du kan også skrive en anden klasse - ugle-tema. Det vil være nyttigt, hvis du beslutter dig for at bruge standarddesignet eller tage standardversionen af skyderen som grundlag for det videre arbejde.
Så skal du tilføje hvert dias i en separat beholder med et div-tag. Selvfølgelig kan du bruge andre tags, men dette tag er det bedste til skydere.
Opkaldsplugin
Og den sidste ting, du skal gøre for at have en færdiglavet skyder på dit websted, er at bruge denne kodeblok:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Det sikrer, at skyderen begynder at fungere, dvs. rulle gennem indholdet, når din side indlæses. Med samme kode kan du forbinde Owl Carousel til WordPress. Indstillingerne for dette plugin er mange og varierede, og nu vil du lære om de vigtigste punkter.
Indstilling af skyderens udseende og funktionalitet
Så hvilke kommandoer kan du bruge til at tilpasse din skyder? Først og fremmest skal du huske kommandoen items, for med den kan du indstille et bestemt antal slides i din skyder. Løkkekommandoen giver dig mulighed for at vælge, om du vil sløjfe skyderen eller stoppe med at rulle ved det sidste element. Der er også kommandoen Træk, som har flere muligheder, såsom mus og berøring. I det første tilfælde kan du gøre det, så elementerne i din skyder kan stryges med musen holdt nede, og i det andet tilfælde ved hjælp af et tryk (denne kommando er velegnet til mobile enheder). En anden vigtig kommando er nav, som muliggør visning af navigationspile. Sammen med det kan du bruge kommandoen navText til at tilføje etiketter til navigationsknapper. Du bør heller ikke glemme autoplay-kommandoen, som giver dig mulighed for at aktivere og deaktivere den automatiske start af at dreje skyderne på din skyder, når siden indlæses. Med denne kommando kan du også bruge autoplayTimeout, for hvilken du kan indstille en specifik værdi i millisekunder, som bestemmer tiden mellem den automatiske vending af hvert af slidene.
Hvis du bruger responsivt webdesign, det vil sige, at designet på din side automatisk ændres afhængigt af hvilken enhed den ses på, så skal du helt sikkert huske den responsive kommando, som giver dig mulighed for at indstille antallet af slides at vise afhængigt af bredden af skærmen, siden bliver vist på.
