Mnoho lidí na svých stránkách si přeje vidět posuvníky - to jsou bloky, které na obrazovce zobrazují jeden prvek obsahu a po určité době mění tento obsah na jiný. Je samozřejmé, že každý webový vývojář je schopen vytvořit samo o sobě posuvník pomocí HTML, CSS a javascriptu, ale není to vždycky smysl. Budete trávit spoustu času, a to navzdory skutečnosti, že na internetu existuje spousta hotových řešení, která značně zjednodušují váš život a vaše stránky jsou mnohem atraktivnější. V tomto článku budeme diskutovat o jednom z těchto řešení s názvem Owl Carousel. Nastavení tohoto posuvníku je neuvěřitelně jednoduché, takže i začátečník to zvládne. Nyní zjistíte, co je to posuvník, a také další důležité detaily. Nastavení sova karuselu se provádí krok za krokem, takže byste měli studovat tento materiál výhradně v pořádku.

Co je to a proč byste si měli vybrat tento konkrétní posuvník?

Owl kolotoč, který úprava budou považovány v tomto článku, je velmi účinná plugin, který přidává do své stránky pěkné a šikovný jezdec že je mnohem jednodušší pro vás pracovat na místě, což umožňuje ušetřit spoustu času, úsilí a peněz. Jaké jsou výhody tohoto pluginu, jelikož na webu je spousta posuvníků? Faktem je, že tento posuvník nabízí desítky možností přizpůsobení, které vám umožní vytvořit jedinečnou a unikátní stránku. Jedná se o adaptivní plug-in, který bude fungovat na všech verzích prohlížečů, a může snadno propojit WordPress a další.populární CMS. Obecně platí, že výhody tohoto posuvníku jsou velmi velké, takže byste se rozhodně měli rozhodnout pro ně. Před zahájením instalace soklového karuselu je však nutné tento plug-in stáhnout.

Soubory ke stažení

Konfigurace Owl Carousel 2 není možná, pokud jste jej do svého počítače nepřihlásili, a protože tento průvodce krok za krokem začíná od začátku. Takže program lze stáhnout s dávkovými manažery, ale jsou to pokročilé vývojářské nástroje, takže zde bude řečeno, jak získat tento plugin standardním způsobem. Musíte jít na oficiální stránky pluginu a stáhnout nejnovější verzi. Poté musí být všechny stažené soubory převedeny do adresáře vašeho webu, protože jsou připraveny pohodlné složky, které se nazývají jako samotný plugin. Upozorňujeme, že tento plugin se vztahuje k jQuery, takže potřebujete tuto knihovnu. Když stahujete tento plugin, budete muset udělat další krok, jmenovitě nastavení posuvníku Owl Carousel 2.

CSS

V sadě Owl Carousel 1.3 zůstávají nastavení v podstatě stejná jako v nové, druhé verzi, přidávají se pouze nové funkce. Základní informace budou však stejné, počínaje přidáním CSS do vašeho dokumentu. Takže prvním krokem je přidat HTML kód linky. Co ti dá? Jedná se o řetězec, který načte potřebné styly pro zobrazení posuvníku. Na to můžete dokončit vizuální dokončení sami. Existuje však také pohodlnější a rychlé řešení. Můžete také přidat řádek, který také načte standardní motiv posuvníku, který je okamžitě připraven k použití. Některé styly můžete upravovat, což činí váš posuvník více jedinečným a neobvyklým a vhodnějším pro váš obsah. Přirozeně by bylo velmi výhodné umístit sousoší Carousel v ruštině, ale každý, kdo vytváří webové stránky, by měl pochopit, že bez znalosti angličtiny to nemůže udělat.

Připojení JavaSpript

Samozřejmě, posuvník nebude fungovat bez JS, takže se také musí dbát na připojení příslušného souboru obsahujícího požadovaný kód. Chcete-li to provést, musíte z dokumentace vložit řádek kódu, ale povinně dodržet jednu podmínku. Každý ví, že JS je programovací jazyk, který provádí všechny příkazy, takže v tomto případě byste měli přidat tento řádek kódu za řádek, který přidává jQuery do vašeho dokumentu. Více z JS v případě tohoto posuvníku nepotřebujete dělat nic.

Návrh HTML kódu

No, připojil jste jezdec, teď je čas ho uspořádat a nastavit. Nejprve musíte napsat kód HTML, aby se posuvník na stránce zobrazil vůbec. Chcete-li to provést, musíte vytvořit kontejner, který bude obsahovat snímky. Můžete to udělat pomocí tagu div, který je třeba přiřadit třídě sova-karuselu. Právě tato třída zajišťuje, že jsou aktivovány všechny styly související s posuvníkem. Můžete také napsat další téma - owl-theme. Budete to užitečné, pokud se rozhodnete použítnebo ve standardní verzi jezdce jako základ pro další práci.
Pak musíte přidat každý snímek do samostatného kontejneru s tagem div. Samozřejmě můžete použít jiné značky, ale nejlépe je to právě ta značka.

Volání plugin

No, poslední věc, kterou potřebujete udělat, aby se váš posuvník již objevil na vašem webu, je použít tento blok kódu: $ (document) .ready (function () {$ (". owl-carousel ") owlCarousel ();}); Zaručuje, že jezdec začne fungovat, to znamená, že při načítání stránky prochází obsah. Pomocí tohoto kódu můžete připojit owl karusel k WordPress. Nastavení tohoto pluginu jsou četné a pestré a nyní se dozvíte o klíčových bodech.

Nakonfigurujte vzhled a funkčnost posuvníku

Takže, které příkazy můžete použít k přizpůsobení posuvníku? Nejprve je třeba pamatovat na příkazy, protože s ním můžete zadat určitý počet snímků ve vašem posuvníku. Příkaz smyčky umožňuje vybrat, zda chcete zavěsit nebo posunout, nebo zastavit posouvání posledního prvku. K dispozici je také příkaz Drag, který má několik možností, jako je myš a dotyk. V prvním případě je možné, aby prvky posuvníku byly otočeny sešroubovanou myší av druhém případě dotykem (tento příkaz je vhodný pro mobilní zařízení). Další důležitý tým je nav, který obsahuje navigační šipky. S ní můžetepoužijte příkaz navText a do navigačních tlačítek přidáváte titulky. Také byste neměli zapomenout na příkaz automatického přehrávání, který umožňuje zapnout a vypnout automatické spuštění prezentace posuvníku při načítání stránky. Spolu s tímto příkazem můžete také použít autoplayTimeout, pro který můžete zadat určitou hodnotu v milisekundách, což určuje čas mezi automatickým převrácením jednotlivých snímků. Používáte-li adaptivní návrh webových stránek, to znamená, že návrh stránky se automaticky mění v závislosti na tom, které zařízení je zobrazeno, pak musíte vždy vzít na vědomí odpověď, která vám umožní nastavit počet snímků v závislosti na šířce obrazovky. , na které je stránka zobrazena.