Många på egen hemsida vill seSlider är sådana block som visar ett innehåll av innehåll på skärmen, och efter en viss tid ändrar de detta innehåll till en annan. Naturligtvis kan varje webbutvecklare skapa en skjutregel på egen hand med HTML, CSS och JavaScript, men det är inte alltid meningslöst. Du kommer att tillbringa ganska mycket tid, även om det finns en hel del färdiga lösningar på Internet som underlättar ditt liv och gör din webbplats mycket attraktivare. I den här artikeln kommer vi att diskutera en av dessa lösningar, som heter Owl Carousel. Att ställa in denna skjutreglage är oerhört enkel, så även en nybörjare kan klara det. Nu kommer du ta reda på vad den här skjutreglaget representerar, liksom andra viktiga detaljer. Uppställning av Uwl Carousel görs steg för steg, så du bör studera detta material endast i ordning.
Vad är det och varför är det värt att välja den här reglaget?
Owl Carousel, vars inställning kommer att varabetraktas i den här artikeln, är ett mycket effektivt plug-in som lägger till din sida en fin och praktisk reglage som underlättar ditt arbete på webbplatsen, vilket gör att du kan spara mycket tid, ansträngning och pengar. Vilka är fördelarna med den här plugin-modulen, eftersom det finns många reglage på webben? Faktum är att den här reglaget ger dig flera dussintals alternativ för anpassning, vilket gör att du kan göra din sida unik och oåterkallelig. Detta är ett adaptivt plugin som kommer att fungera på alla versioner av webbläsare, och det kan enkelt kopplas till WordPress och andra populära CMS. I allmänhet är fördelarna med denna skjutreglage väldigt mycket, så du borde definitivt göra ett val till sin fördel. Innan du börjar installera Owl Carousel måste du dock ladda ner den här plugin-modulen.
nedladdning
Det går inte att ställa in uglakarusellen 2 om du inte gör detladdade den ner till din dator, och eftersom det här är en steg-för-steg-instruktion, är det värt att börja från början. Så kan programmet laddas ner med hjälp av pakethanteraren, men detta avancerade utvecklingsverktyg, så här får du lära dig hur du får kontakten på ett standardiserat sätt. Du måste gå till den officiella webbplatsen för plugin och ladda ner den senaste versionen. Därefter ska alla nedladdade filer överföras till katalogen på din webbplats och förbereda en lämplig mapp, som heter samma som plugin själv. Observera att det här pluginet är kopplat till jQuery, så du måste också ha det här biblioteket tillgängligt. Tja, när du laddar ner den här plugin-modulen måste du ta nästa steg, nämligen inställningen för Uwl Carousel 2.
CSS
I Uggla Carousel 1.3 inställningar är nästan lika som i den nyare andra versionen, bara nya funktioner läggs till. Grundinformationen kommer dock att vara densamma, från och med att du lägger till CSS i ditt dokument. Så det första steget är att lägga till en sträng till HTML-koden. . Vad ger hon dig?Detta är en sträng som laddar upp de nödvändiga formaten till webbplatsen för att visa reglaget. Vid denna tidpunkt kan du avsluta genom att engagera sig i visuell bearbetning. Det finns dock en mer bekväm och snabb lösning. Du kan också lägga till en rad. som också laddar upp standardtematglider, vilket gör det omedelbart redo att användas. Du kan redigera vissa stilar, vilket gör din reglage mer unik och ovanlig, liksom mer lämplig för ditt innehåll. Naturligtvis skulle inställningarna för Owl Carousel på ryska vara mycket praktiska, men varje person som skapar webbplatser borde förstå att han inte kan göra utan kunskaper i engelska.
JavaScript-anslutning
Naturligtvis fungerar inte skjutreglaget utan JS,därför måste du 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 under ett villkor.Alla vet att JS är ett programmeringsspråk som kör alla kommandon i ordning, i det här fallet bör du lägga till den här kodraden efter den rad som lägger till jQuery-biblioteket i ditt dokument. Du behöver inte göra något mer med JS när det gäller den här reglaget.
HTML-kodlayout
Du har anslutit skjutreglaget, nu är det dagsatt utfärda och konfigurera det. Först måste du skriva HTML-kod för att få skjutreglaget att visas på din sida. För att göra detta måste du skapa en behållare som innehåller objektglas. Detta kan göras med div-taggen, som måste tilldelas uggla-karusellklassen. Det är den här klassen som ser till att alla stilar som tillhör skjutreglaget aktiveras. Du kan också registrera en annan klass - uggeltema. Det kommer att vara användbart för dig om du väljer att använda standardkonstruktionen eller om du tog standardversionen av skjutreglaget som grund för ytterligare arbete.
Sen 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 passar bäst för reglagen.
Plugin-samtal
Det sista du behöver göra för att få en färdig skjutreglage att visas på din webbplats är att använda detta kodblock:
$ (dokument). redan (funktion () {
$ (". uggla-karusell"). uggla karusell ();
});
Det säkerställer att skjutreglaget startarfunktion, det vill säga bläddra i innehållet när din sida laddas. Med samma kod kan du ansluta Owl Carousel till WordPress. Inställningarna för detta plugin är många och varierande, och nu lär du dig om de viktigaste punkterna.
Ställa in utseendet och funktionaliteten på reglaget
Så vilka kommandon kan du använda,anpassa skjutreglaget? Först och främst måste du komma ihåg objektskommandot, eftersom du med det kan ställa in ett visst antal bilder i skjutreglaget. Loop-kommandot låter dig välja om du vill slinga skjutreglaget eller sluta rulla på det sista objektet. Det finns också Drag-kommandot, som har flera alternativ, till exempel mus och beröring. I det första fallet kan du göra det så att elementen i skjutreglaget kan vändas med den klämda musen, och i det andra fallet genom att trycka på (detta kommando passar för mobila enheter). Ett annat viktigt kommando är nav, som möjliggör visning av navigationspilar. Tillsammans med det kan du använda kommandot navText och lägga till bildtexter till navigeringsknapparna. Du bör inte heller glömma bort autoplay-kommandot, som gör att du kan slå på och av den automatiska början att vrida på skjutreglagen när sidan laddas. Tillsammans med detta kommando kan du också använda autoplayTimeout, för vilket du kan ställa in ett specifikt värde i millisekunder, vilket kommer att bestämma tiden mellan att automatiskt bläddra igenom var och en av bilderna.
Om du använder lyhörd webbdesign, dåom utformningen av din sida automatiskt ändras beroende på vilken enhet den visas på, måste du definitivt komma ihåg det responsiva kommandot, vilket gör att du kan ställa in antalet visade bilder beroende på bredden på skärmen på vilken sidan visas.
