Owl Carousel: nastavení a konektivita

Mnoho lidí na vašich vlastních stránek chtějí vidět posuvníky - to jsou kameny, které zobrazují položky obsahu na obrazovce, a po určité době se nahrazují obsahu na straně druhé. Je samozřejmé, že každý webovský vývojář je schopen vytvořit vlastní posuvník pomocí HTML, CSS a jаvascript, ale to ne vždy dává smysl. Budete trávit hodně času, a to navzdory skutečnosti, že internet má mnoho ready-made řešení, které jej činí mnohem jednodušší život a dělá vaše stránky mnohem atraktivnější. V tomto článku budeme diskutovat o jednom z těchto řešení, nazvaném Owl Carousel. Nastavení tohoto posuvníku je neuvěřitelně jednoduché, takže se s ním může vyrovnat i začátečník. Nyní zjistíte, jaký je tento posuvník, stejně jako další důležité detaily. Nastavení sousedního karuselu se provádí krok za krokem, takže byste měli studovat tento materiál pouze v pořadí.

Co je to a proč stojí za výběr tohoto posuvníku?

Owl Carousel, nastavení, které bude považovat v tomto článku, je vysoce účinný plugin, který přidává do své stránky pěkné a šikovný jezdec, což je mnohem jednodušší pro vás pracovat na místě, ušetří spoustu času, úsilí a peněz. Jaké jsou výhody tohoto konkrétního plug-inu, protože se pohybují na síti má hodně? Faktem je, že tento vysouvací telefon nabízí několik desítek možností konfigurace, které umožňují, aby vaše stránky jedinečné a neopakovatelné. Tento adaptivní plugin, který bude pracovat na všech prohlížečích, a to může být snadno připojit WordPress a další populární CMS. Obecně platí, že výhody plynoucí z tohoto jezdce tam je hodně, takže byste měli určitě udělat výběr v jeho prospěch. Nicméně předtím, než začnete konfiguraci sova kolotoč, tento plugin musí být staženy.

Stáhnout

Nastavení sóla Carousel 2 je nemožné, pokud jste jej do svého počítače nenahrali, a protože je to krok za krokem, stojí za to začít od samého počátku. Takže program lze stáhnout pomocí správců balíčků, 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 jeho nejnovější verzi. Poté by měly být všechny stažené soubory přeneseny do adresáře vašeho webu a připravovat tak pohodlnou složku, která se nazývá jako samotný plugin. Všimněte si, že tento plugin je přidružen k jQuery, takže potřebujete mít tuto knihovnu k dispozici. Po stažení tohoto plug-inu budete muset udělat další krok, jmenovitě nastavení posuvníku Owl Carousel 2.

CSS

V sadě Owl Carousel 1.3 zůstanou téměř stejné jako u nové druhé verze, přidávají se pouze nové funkce. Základní informace budou však stejné, počínaje přidáním CSS do dokumentu. Takže prvním krokem je přidání řádku do kódu HTML . Co vám to dává? Jedná se o řetězec, který na stránkách načte potřebné styly, aby zobrazil posuvník. Na tom můžete dokončit, abyste sami zpracovali vizuální zpracování. Existuje však 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 tak, že jezdec bude jedinečný a neobvyklý a také vhodnější pro váš obsah. Přirozeně by bylo nastavení sovětského karuselu v ruštině velmi výhodné, ale každý, kdo vytváří webové stránky, by měl pochopit, že bez znalosti angličtiny to nemůže udělat.

Připojení jazyka JavaSpript

Samozřejmě, posuvník nebude pracovat bez JS, takže se také musí postarat o připojení příslušného souboru obsahujícího potřebný kód. Chcete-li to provést, musíte vložit řádek kódu z dokumentace, ale s povinným dodržováním jedné podmínky. Každý ví, že JS - programovací jazyk, který vykonává všechny příkazy v pořadí, v uvedeném pořadí, v tomto případě byste měli přidat tento řádek kódu po tomto řádku, který přidává do své knihovny dokumentů jQuery. Více s JS v případě tohoto posuvníku nepotřebujete dělat nic.

Vytváření kódu HTML

No, připojil jste jezdec, teď je čas zdobit a přizpůsobit. Nejprve musíte napsat kód HTML, aby se posuvník obecně zobrazoval na vaší stránce. Chcete-li to provést, musíte vytvořit kontejner, který bude obsahovat snímky. Můžete to udělat pomocí tagu div, který chcete přiřadit třídě sokola. Právě tato třída zajišťuje, že všechny styly související s posuvníkem budou aktivovány. Také můžete zaregistrovat další téma - owl-theme. To je užitečné pro vás, pokud se rozhodnete použít výchozí návrh nebo přijmout standardní verzi posuvníku jako základ pro další práci.

Poté je nutné přidat každý snímek do samostatného kontejneru s tagem div. Samozřejmě můžete použít jiné tagy, ale nejlépe pro posuvníky je tato značka.

Zavolejte plugin

Poslední věc, kterou musíte udělat, aby váš web měl připravený posuvník, je použít tento blok kódu:

$ (dokument) .ready (funkce () {

$ (".wl-carousel"). owlCarousel () -

}) -

Zajišťuje, že jezdec začne fungovat, to znamená, že při načítání stránky prochází obsah. Se stejným kódem můžete připojit owl carousel k 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 můžete použít k přizpůsobení posuvníku? Nejdříve si musíte pamatovat 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 zvolit, zda smyčka posunout, nebo zastavit posouvání posledního prvku. K dispozici je také příkaz Drag, který má několik možností, například myš a dotyk. V prvním případě můžete provést posouvání prvků posuvníku pomocí oříznuté myši a ve druhém případě - dotykem (tento příkaz je vhodný pro mobilní zařízení). Dalším důležitým příkazem je navigace, která zahrnuje zobrazení navigačních šipek. Spolu s ním můžete použít příkaz navText a do navigačních tlačítek přidávat štítky. Také byste neměli zapomenout na příkaz automatického přehrávání, který vám umožní 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, která určí čas mezi automatickým převrácením každého snímku.

Použijete-li responzivní design webu, že je vaše stránka konstrukční změny automaticky v závislosti na zařízení, na kterém se díval, pak budete určitě potřebovat mít na paměti, odezvou tým, který vám umožní určit počet zobrazených snímků, v závislosti na šířce obrazovky, na kterých stránka je zobrazena.