Mnoho lidí na svých webových stránkách se chce podívatPosuvníky jsou takové 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ý webovský vývojář je schopen vytvořit vlastní posuvník pomocí HTML, CSS a JavaScript, ale to ne vždy dává smysl. Budete strávit spoustu času, ačkoli je na internetu spousta hotových řešení, která výrazně usnadň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í, 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, jehož nastavení budev tomto článku je velmi efektivní plug-in, který do vaší stránky přidává pěkný a pohodlný jezdec, který velmi usnadní práci na webu a umožní vám ušetřit spoustu času, úsilí a peněz. Jaké jsou výhody tohoto konkrétního modulu plug-in, protože na webu je spousta posuvníků? Faktem je, že tento posuvník nabízí několik desítek možností přizpůsobení, které vám umožní vytvořit stránku jedinečnou a neopakovatelnou. Jedná se o adaptivní plugin, který bude pracovat na všech verzích prohlížečů, a může být snadno připojen k WordPress a dalším populárním systémům CMS. Obecně platí, že výhody tohoto jezdce jsou hodně, takže byste se rozhodně měli rozhodnout ve prospěch tohoto jezdce. Předtím, než začnete nastavovat soklový karusel, je třeba tento plug-in stáhnout.
Stáhnout
Nastavení sousedního karuselu 2 není možné, pokud nestahování do počítače 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 sousedním karuselu 1.3 nastavení zůstanou téměř 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 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í témakterý 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í k Javu
Samozřejmě jezdec nebude fungovat bez JS,takže musíte také dbát na připojení příslušného souboru obsahujícího požadovaný 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 je programovací jazyk, který provádí všechny příkazy v pořadí, v tomto případě byste měli přidat tento řádek kódu za řádek, který do knihovny přidá knihovnu jQuery. Více s JS v případě tohoto posuvníku nepotřebujete dělat nic.
Formátování HTML
No, zasunuli jste posuvník, teď je časuspořádat 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í značky div, které je třeba přiřadit třídu owl-carousel. Je to tato třída, která zajišťuje, že budou aktivovány všechny styly, které se vztahují k posuvníku. Můžete také přidat jednu další třídu - téma sova. Bude se vám hodit, pokud se rozhodnete použít výchozí design nebo si jako základ pro další práci vezmete standardní verzi posuvníku.
Poté musíte přidat každý snímek do samostatného kontejneru se značkou div. Přirozeně můžete použít i jiné značky, ale tato značka je nejlepší pro posuvníky.
Volání pluginu
Poslední věcí, kterou musíte udělat, aby se na vašem webu objevil připravený posuvník, je použití tohoto bloku kódu:
$ (document) .ready (function () {
$ (". owl-carousel"). owlCarousel ();
});
Zajišťuje spuštění posuvníkufunkce, to znamená procházení obsahu při načítání stránky. Se stejným kódem můžete připojit Owl Carousel k WordPress. Nastavení tohoto pluginu je mnoho a různorodé a nyní se dozvíte o nejdůležitějších bodech.
Přizpůsobení vzhledu a funkčnosti posuvníku
Jaké příkazy tedy můžete použít,přizpůsobit posuvník? Nejprve si musíte zapamatovat příkaz items, protože s ním můžete nastavit určitý počet snímků v jezdec. Příkaz smyčky vám umožní zvolit, zda chcete smyčku posunout nebo zastavit posouvání u posledního prvku. K dispozici je také příkaz Přetáhnout, který má několik možností, například myš a dotyk. V prvním případě to můžete udělat tak, aby bylo možné prvky posuvníku převrátit podržením myši, a v 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 ním můžete pomocí příkazu navText přidat štítky do navigačních tlačítek. Také byste neměli zapomenout na příkaz automatického přehrávání, který vám umožní zapnout a vypnout automatické zahájení otáčení snímků 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 nastavit konkrétní hodnotu v milisekundách, která určí čas mezi automatickým převrácením každého ze snímků.
Pokud používáte responzivní webový designPokud se váš design stránky automaticky mění v závislosti na tom, na kterém zařízení je zobrazena, pak si určitě musíte pamatovat na responzivní příkaz, který vám umožní nastavit počet zobrazených snímků v závislosti na šířce obrazovky, na které je stránka zobrazena.
