Mnoho lidí na svém vlastním webu chce vidět posuvníky – to jsou bloky, které zobrazují jeden prvek obsahu na obrazovce a po určité době mění tento obsah na jiný. Každý webový vývojář je přirozeně schopen samostatně vytvořit slider pomocí HTML, CSS a JavaScriptu, ale ne vždy to dává smysl. Strávíte tím poměrně dost času, nehledě na to, že na internetu je poměrně dost hotových řešení, která vám výrazně usnadní život a výrazně zatraktivní vaše stránky. Tento článek se zaměří na jedno z těchto řešení s názvem Owl Carousel. Nastavení tohoto posuvníku je neuvěřitelně jednoduché, takže ho zvládne i začátečník. Nyní se dozvíte, co tento posuvník je, a také další důležité detaily. Nastavení sovího kolotoče je proces krok za krokem, takže byste si tento materiál měli prostudovat pouze v pořadí.
Co to je a proč byste si měli vybrat tento konkrétní posuvník?
Owl Carousel, o jehož konfiguraci bude řeč v tomto článku, je velmi účinný plugin, který na vaši stránku přidá krásný a pohodlný posuvník, který vám výrazně usnadní práci na webu,ušetří spoustu času, úsilí a peněz. Jaké jsou výhody tohoto konkrétního pluginu, protože na webu je poměrně hodně posuvníků? Faktem je, že tento posuvník vám nabízí desítky možností přizpůsobení, které vám umožní udělat vaši stránku jedinečnou a nenapodobitelnou. Jedná se o responzivní plugin, který bude fungovat na všech verzích prohlížečů a lze jej snadno propojit s WordPress a dalšími populárními CMS. Obecně má tento posuvník mnoho výhod, takže byste se měli rozhodně rozhodnout v jeho prospěch. Než však začnete nastavovat Owl Carousel, musíte tento plugin načíst.
Stáhnout
Nastavení Owl Carousel 2 není možné, pokud jste si jej nestáhli do počítače, a protože se jedná o návod krok za krokem, měli byste začít úplně od začátku. Program lze tedy stáhnout pomocí správců balíčků, ale jedná se o pokročilé vývojářské nástroje, takže zde vám řekneme, jak tento plugin získat standardním způsobem. Musíte jít na oficiální stránky pluginu a stáhnout si jeho nejnovější verzi. Poté je třeba všechny stažené soubory přenést do adresáře vašeho webu a připravit pohodlnou složku, která se jmenuje stejně jako samotný plugin. Všimněte si, že tento plugin je součástí jQuery, takže musíte mít k dispozici i tuto knihovnu. Jakmile si stáhnete tento plugin, budete se muset postarat o další krok, kterým je nastavení posuvníku Owl Carousel 2.
CSS
BNastavení Owl Carousel 1.3 zůstává téměř stejné jako v novější verzi 2, pouze jsou přidány nové funkce. Základní informace však budou stejné, počínaje přidáním CSS do vašeho dokumentu. Takže prvním krokem je přidat řádek. co ti dává? Toto je řetězec, který načte na web potřebné styly pro zobrazení posuvníku. Zde můžete zakončit vizuálním zpracováním sami. Existuje však pohodlnější a rychlejší řešení. Můžete také přidat řádek, který také načte výchozí motiv posuvníku, takže je okamžitě připraven k použití. Některé styly můžete upravit, aby byl posuvník jedinečnější a odlišnější a vhodnější pro váš obsah. Nastavení Owl Carousel v ruštině by samozřejmě bylo velmi pohodlné, ale každý, kdo tvoří webové stránky, by měl pochopit, že se neobejde bez znalosti angličtiny.
Připojení JavaSpript
Posuvník samozřejmě nebude fungovat bez JS, takže byste se měli postarat o to, abyste zahrnuli příslušný soubor obsahující potřebný kód. K tomu je potřeba vložit řádek kódu z dokumentace, musí však být splněna jedna podmínka. Každý ví, že JS je programovací jazyk, který provádí všechny příkazy v pořadí, takže v tomto případě byste měli přidat tento řádek kódu za řádek, který přidává knihovnu jQuery do vašeho dokumentu. Více s JS v případě tohoto posuvníku nemáte co dělatpotřeba.
HTML kódování
Posuvník jste připojili, nyní je čas ho navrhnout a přizpůsobit. Nejprve musíte napsat HTML kód, aby se posuvník na vaší stránce vůbec objevil. Chcete-li to provést, musíte vytvořit kontejner, který bude obsahovat snímky. To lze provést pomocí tagu div, kterému je třeba přiřadit třídu owl-carusel. Právě tato třída zajišťuje, že budou aktivovány všechny styly související s posuvníkem. Můžete také napsat další třídu - téma sova. Bude se vám hodit, pokud se rozhodnete použít výchozí design nebo vzít standardní verzi posuvníku jako základ pro další práci.
Poté musíte každý snímek přidat do samostatného kontejneru se značkou div. Samozřejmě můžete použít i jiné značky, ale tato značka je nejlepší pro posuvníky.
Call plugin
A poslední věc, kterou musíte udělat, abyste měli na svém webu hotový posuvník, je použít tento blok kódu:
$(dokument).připraveno(funkce(){
$(".owl-carousel").owlCarousel();
});
Zajistí, že posuvník začne fungovat, tj. procházet obsahem, když se vaše stránka načte. Pomocí stejného kódu můžete propojit Owl Carousel s WordPress. Nastavení tohoto pluginu jsou četná a rozmanitá a nyní se dozvíte o nejdůležitějších bodech.
Nastavení vzhledu a funkčnosti posuvníku
Jaké příkazy tedy můžete použít k přizpůsobení posuvníku? Nejprve si musíte zapamatovat příkaz items, protože s ním můžete nastavit konkrétní počet snímků ve vašem posuvníku. Příkaz smyčky vám umožní zvolit, zda se má jezdec opakovat nebo přestat rolovat na posledním prvku. K dispozici je také příkaz Drag, který má několik možností, jako je myš a dotyk. V prvním případě to můžete udělat tak, že prvky vašeho jezdce lze posouvat stisknutou myší a ve druhém případě pomocí dotyku (tento příkaz je vhodný pro mobilní zařízení). Dalším důležitým příkazem je nav, který umožňuje zobrazení navigačních šipek. Spolu s tím můžete použít příkaz navText k přidání štítků k navigačním tlačítkům. Také byste neměli zapomenout na příkaz autoplay, který vám umožní povolit a zakázat automatické spouštění otáčení posuvníku při načítání stránky. Pomocí tohoto příkazu můžete také použít autoplayTimeout, u kterého můžete nastavit konkrétní hodnotu v milisekundách, která určí dobu mezi automatickým otočením každého ze sklíček.
Používáte-li responzivní webdesign, tedy design vaší stránky se automaticky mění podle toho, na jakém zařízení je prohlížena, pak si rozhodně musíte zapamatovat responzivní příkaz, který umožňuje nastavit počet snímků zobrazit v závislosti na šířce obrazovky, na které je stránka zobrazena.
