Mnoho ľudí na ich vlastnej stránke chce vidieť posuvníky – sú to bloky, ktoré zobrazujú jeden prvok obsahu na obrazovke a po určitom čase menia tento obsah na iný. Prirodzene, každý webový vývojár je schopný samostatne vytvoriť slider pomocou HTML, CSS a JavaScriptu, ale nie vždy to dáva zmysel. Strávite pomerne veľa času aj napriek tomu, že na internete je pomerne veľa hotových riešení, ktoré vám výrazne uľahčia život a zatraktívnia vašu stránku. Tento článok sa zameria na jedno z týchto riešení s názvom Owl Carousel. Nastavenie tohto posúvača je neskutočne jednoduché, takže ho zvládne aj začiatočník. Teraz sa dozviete, čo je tento posuvník, ako aj ďalšie dôležité detaily. Nastavenie kolotoča Owl Carousel je proces krok za krokom, preto by ste si tento materiál mali preštudovať len v poradí.
Čo to je a prečo by ste si mali vybrať tento konkrétny posuvník?
Owl Carousel, o konfigurácii ktorého sa bude diskutovať v tomto článku, je veľmi efektívny doplnok, ktorý na vašu stránku pridá krásny a pohodlný posuvník, ktorý vám výrazne uľahčí prácu na webe,ušetrí veľa času, úsilia a peňazí. Aké sú výhody tohto konkrétneho pluginu, pretože na webe je pomerne veľa posuvníkov? Faktom je, že tento posuvník vám ponúka desiatky možností prispôsobenia, ktoré vám umožnia urobiť vašu stránku jedinečnou a nenapodobiteľnou. Ide o responzívny doplnok, ktorý bude fungovať vo všetkých verziách prehliadača a dá sa jednoducho pripojiť k WordPressu a ďalším populárnym CMS. Vo všeobecnosti má tento posúvač veľa výhod, takže by ste sa určite mali rozhodnúť v jeho prospech. Predtým, ako začnete nastavovať Owl Carousel, je však potrebné načítať tento doplnok.
Stiahnuť
Nastavenie Owl Carousel 2 nie je možné, ak ste si ho nestiahli do počítača, a keďže ide o návod krok za krokom, mali by ste začať úplne od začiatku. Program je teda možné stiahnuť pomocou správcov balíkov, ide však o pokročilé nástroje pre vývojárov, preto vám tu povieme, ako tento plugin získať štandardným spôsobom. Musíte prejsť na oficiálnu webovú stránku doplnku a stiahnuť si jeho najnovšiu verziu. Potom musia byť všetky stiahnuté súbory prenesené do adresára vašej stránky, pričom si pripravíte pohodlný priečinok, ktorý má rovnaký názov ako samotný doplnok. Upozorňujeme, že tento doplnok je súčasťou balíka jQuery, takže musíte mať k dispozícii aj túto knižnicu. Keď si stiahnete tento doplnok, budete sa musieť postarať o ďalší krok, ktorým je nastavenie posuvníka Owl Carousel 2.
CSS
BNastavenia Owl Carousel 1.3 zostávajú takmer rovnaké ako v novšej verzii 2, len pribudli nové funkcie. Základné informácie však budú rovnaké, počnúc pridaním CSS do dokumentu. Prvým krokom je teda pridanie riadku. čo ti dáva? Toto je reťazec, ktorý načíta na stránku potrebné štýly na zobrazenie posúvača. Tu môžete dokončiť vizuálne spracovanie sami. Existuje však pohodlnejšie a rýchlejšie riešenie. Môžete tiež pridať riadok, ktorý tiež načíta predvolený motív posúvača, vďaka čomu je okamžite pripravený na použitie. Môžete upraviť niektoré štýly, aby bol váš posúvač jedinečnejší a odlišnejší a vhodnejší pre váš obsah. Prirodzene, nastavenie Owl Carousel v ruštine by bolo veľmi pohodlné, ale každý, kto vytvára webové stránky, by mal pochopiť, že sa nezaobíde bez znalosti angličtiny.
Pripojenie JavaSpript
Posuvník samozrejme nebude fungovať bez JS, takže by ste sa mali postarať aj o zahrnutie príslušného súboru obsahujúceho potrebný kód. Na to je potrebné vložiť riadok kódu z dokumentácie, avšak musí byť splnená jedna podmienka. Každý vie, že JS je programovací jazyk, ktorý vykonáva všetky príkazy v poradí, takže v tomto prípade by ste mali pridať tento riadok kódu za riadok, ktorý pridáva knižnicu jQuery do vášho dokumentu. Viac s JS v prípade tohto posúvača nemáte čo robiťpotreba.
HTML kódovanie
Posuvník ste pripojili, teraz je čas ho navrhnúť a prispôsobiť. Najprv musíte napísať HTML kód, aby sa posuvník na vašej stránke vôbec objavil. Ak to chcete urobiť, musíte vytvoriť kontajner, ktorý bude obsahovať snímky. Dá sa to urobiť pomocou tagu div, ktorému je potrebné priradiť triedu owl-carusel. Práve táto trieda zabezpečuje, že budú aktivované všetky štýly súvisiace s posuvníkom. Môžete napísať aj inú triedu - tému sova. Bude sa vám hodiť, ak sa rozhodnete použiť predvolený dizajn alebo ako základ pre ďalšiu prácu vezmete štandardnú verziu posuvníka.
Potom musíte pridať každú snímku do samostatného kontajnera so značkou div. Samozrejme, môžete použiť aj iné značky, ale táto značka je najlepšia pre posúvače.
Doplnok hovorov
A posledná vec, ktorú musíte urobiť, aby ste mali na svojom webe pripravený posúvač, je použiť tento blok kódu:
$(dokument).pripravený(funkcia(){
$(".owl-carousel").owlCarousel();
});
Zabezpečuje, že posúvač začne fungovať, t. j. posúvať obsah, keď sa vaša stránka načíta. S rovnakým kódom môžete pripojiť Owl Carousel k WordPress. Nastavenia tohto doplnku sú početné a rozmanité a teraz sa dozviete o najzásadnejších bodoch.
Nastavenie vzhľadu a funkčnosti posúvača
Aké príkazy teda môžete použiť na prispôsobenie posúvača? Najprv si musíte zapamätať príkaz items, pretože pomocou neho môžete nastaviť konkrétny počet snímok vo vašom posúvači. Príkaz slučky vám umožní vybrať si, či sa má posúvať v slučke alebo či sa zastaví rolovanie pri poslednom prvku. Nechýba ani príkaz Pretiahnuť, ktorý má viacero možností, ako napríklad myš a dotyk. V prvom prípade to môžete urobiť tak, že prvky vášho posúvača možno posúvať stlačenou myšou a v druhom prípade pomocou dotyku (tento príkaz je vhodný pre mobilné zariadenia). Ďalším dôležitým príkazom je nav, ktorý umožňuje zobrazenie navigačných šípok. Spolu s ním môžete použiť príkaz navText na pridávanie štítkov k navigačným tlačidlám. Tiež by ste nemali zabudnúť na príkaz autoplay, ktorý vám umožňuje povoliť a zakázať automatické spustenie otáčania posúvača pri načítaní stránky. Pomocou tohto príkazu môžete použiť aj autoplayTimeout, pre ktorý môžete nastaviť konkrétnu hodnotu v milisekundách, ktorá určí čas medzi automatickým otočením každého zo snímok.
Ak používate responzívny webdizajn, čiže dizajn vašej stránky sa automaticky mení v závislosti od toho, na akom zariadení je prezeraná, tak si určite musíte zapamätať responzívny príkaz, ktorý vám umožní nastaviť počet snímok zobraziť v závislosti od šírky obrazovky, na ktorej sa stránka zobrazuje.
