Många människor på sin egen sida vill se skjutreglage – det här är block som visar ett innehållselement på skärmen och efter en viss tid ändrar detta innehåll till ett annat. Naturligtvis kan varje webbutvecklare självständigt skapa ett skjutreglage med HTML, CSS och JavaScript, men det är inte alltid vettigt. Du kommer att spendera ganska mycket tid, trots att det finns en hel del färdiga lösningar på Internet som gör ditt liv mycket enklare och gör din sida mycket mer attraktiv. Den här artikeln kommer att fokusera på en av dessa lösningar som kallas Owl Carousel. Att ställa in det här reglaget är otroligt enkelt, så även en nybörjare kan hantera det. Nu kommer du att lära dig vad det här reglaget är, liksom andra viktiga detaljer. Att ställa in Owl Carousel är en steg-för-steg-process, så du bör studera det här materialet endast i ordning.
Vad är det och varför ska du välja just det här reglaget?
Owl Carousel, vars konfiguration kommer att diskuteras i den här artikeln, är ett mycket effektivt plugin som lägger till en vacker och bekväm reglage till din sida, vilket avsevärt kommer att underlätta ditt arbete på webbplatsen,sparar mycket tid, ansträngning och pengar. Vilka är fördelarna med just detta plugin, eftersom det finns ganska många reglage på webben? Faktum är att den här reglaget erbjuder dussintals anpassnings alternativ, vilket gör att du kan göra din sida unik och oefterhärmlig. Det är en responsiv plugin som fungerar på alla webbläsarversioner och som enkelt kan kopplas till WordPress och andra populära CMS. I allmänhet har detta reglage många fördelar, så du bör definitivt göra ett val till dess fördel. Innan du börjar ställa in Owl Carousel måste dock denna plugin fortfarande laddas.
Ladda ned
Det går inte att ställa in Owl Carousel 2 om du inte har laddat ner den till din dator, och eftersom detta är en steg-för-steg-instruktion bör du börja från början. Så programmet kan laddas ner med hjälp av pakethanterare, men det här är avancerade utvecklarverktyg, så här kommer vi att berätta hur du skaffar detta plugin på standardsätt. Du måste gå till den officiella webbplatsen för plugin och ladda ner den senaste versionen. Efter det måste alla nedladdade filer överföras till katalogen på din webbplats efter att ha förberett en bekväm mapp som heter samma namn som själva plugin-programmet. Observera att det här insticksprogrammet är paketerat med jQuery, så du måste ha det biblioteket tillgängligt också. Tja, när du väl har laddat ner detta plugin måste du ta hand om nästa steg som är att ställa in Owl Carousel-reglaget 2.
CSS
BOwl Carousel 1.3-inställningarna förblir nästan desamma som i den nyare versionen 2, bara nya funktioner läggs till. Den grundläggande informationen kommer dock att vara densamma, och börjar med att lägga till CSS i ditt dokument. Så det första steget är att lägga till raden. Vad ger hon dig? Detta är en sträng som laddar de nödvändiga stilarna till webbplatsen för att visa skjutreglaget. Det är här du kan avsluta med att göra den visuella bearbetningen själv. Det finns dock en bekvämare och snabbare lösning. Du kan också lägga till en rad som också laddar reglagets standardtema, vilket gör den omedelbart redo att användas. Du kan redigera några av stilarna för att göra din skjutreglage mer unik och annorlunda och mer lämpad för ditt innehåll. Naturligtvis skulle Owl Carousel-inställningarna på ryska vara mycket bekväma, men varje person som skapar webbplatser bör förstå att han inte kan klara sig utan kunskaper i engelska.
JavaSript-anslutning
Självklart kommer skjutreglaget inte att fungera utan JS, så du bör också se till att inkludera lämplig fil som innehåller den nödvändiga koden. För att göra detta måste du infoga en kodrad från dokumentationen, dock måste ett villkor vara uppfyllt. Alla vet att JS är ett programmeringsspråk som kör alla kommandon i ordning, så i det här fallet bör du lägga till denna kodrad efter raden som lägger till jQuery-biblioteket till ditt dokument. Mer med JS i fallet med detta reglage, du har ingenting att görabehöver.
HTML-kodning
Tja, du har anslutit reglaget, nu är det dags att designa och anpassa det. Först och främst måste du skriva HTML-koden för att skjutreglaget överhuvudtaget ska visas på din sida. För att göra detta måste du skapa en behållare som ska innehålla bilderna. Detta kan göras med hjälp av div-taggen, som måste tilldelas uggle-karusellklassen. Det är den här klassen som säkerställer att alla stilar relaterade till skjutreglaget kommer att aktiveras. Du kan också skriva en annan klass - uggle-tema. Det kommer att vara praktiskt om du bestämmer dig för att använda standarddesignen eller ta standardversionen av skjutreglaget som grund för fortsatt arbete.
Då måste du lägga till varje bild i en separat behållare med en div-tagg. Naturligtvis kan du använda andra taggar, men den här taggen är bäst för skjutreglage.
Call plugin
Och det sista du behöver göra för att ha ett färdigt reglage på din webbplats är att använda detta kodblock:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Det ser till att skjutreglaget börjar fungera, d.v.s. bläddra igenom innehållet, när din sida laddas. Med samma kod kan du koppla Owl Carousel till WordPress. Inställningarna för detta plugin är många och varierande, och nu kommer du att lära dig om de viktigaste punkterna.
Ställa in skjutreglagets utseende och funktion
Så vilka kommandon kan du använda för att anpassa din reglage? Först och främst måste du komma ihåg objektkommandot, för med det kan du ställa in ett specifikt antal bilder i reglaget. Med loopkommandot kan du välja om du vill loopa reglaget eller sluta rulla vid det sista elementet. Det finns också kommandot Dra, som har flera alternativ, som mus och beröring. I det första fallet kan du göra det så att elementen i din reglage kan svepas med musen nedtryckt, och i det andra fallet med hjälp av en touch (det här kommandot är lämpligt för mobila enheter). Ett annat viktigt kommando är nav, som möjliggör visning av navigeringspilar. Tillsammans med det kan du använda kommandot navText för att lägga till etiketter till navigeringsknappar. Du bör inte heller glömma bort autoplay-kommandot, som låter dig aktivera och inaktivera den automatiska starten av att vrida skjutreglaget när sidan laddas. Med det här kommandot kan du också använda autoplayTimeout, för vilken du kan ställa in ett specifikt värde i millisekunder, vilket kommer att bestämma tiden mellan den automatiska vridningen av var och en av bilderna.
Om du använder responsiv webbdesign, det vill säga designen på din sida ändras automatiskt beroende på vilken enhet den visas på, måste du definitivt komma ihåg det responsiva kommandot, som låter dig ställa in antalet bilder att visa beroende på skärmens bredd som sidan visas på.
