Owl Carousel: nastavenie a konektivita

Mnohí ľudia na svojich webových stránkach chcú vidieťSliders sú také bloky, ktoré na obrazovke zobrazujú jeden prvok obsahu a po určitom čase menia tento obsah na iný. Samozrejme, každý webový vývojár je schopný vytvoriť vlastný posuvník pomocou HTML, CSS a JavaScript, ale to nie vždy má zmysel. Budete stráviť pomerne veľa času, hoci na internete je pomerne málo hotových riešení, ktoré výrazne uľahčujú váš život a vaše webové stránky sú oveľa atraktívne. V tomto článku sa budeme zaoberať jedným z týchto riešení, nazvaným Owl Carousel. Nastavenie tohto posúvača je neuveriteľne jednoduché, takže sa s ním môže vyrovnať aj začiatočník. Teraz zistíte, čo tento jazdca predstavuje, rovnako ako ďalšie dôležité detaily. Nastavenie sójového karuselu sa vykonáva krok za krokom, takže by ste mali študovať tento materiál len v poriadku.

Čo je a prečo stojí za výber tohto posúvača?

Owl Carousel, ktorého nastavenie budev tomto článku je veľmi efektívny plug-in, ktorý pridáva k vašej stránke pekný a pohodlný jazdca, ktorý výrazne uľahčí vašu prácu na webe a umožní vám ušetriť veľa času, úsilia a peňazí. Aké sú výhody tohto konkrétneho doplnku, pretože na webe je veľa posuvníkov? Faktom je, že tento posúvač ponúka niekoľko desiatok možností prispôsobenia, ktoré vám umožnia urobiť vašu stránku jedinečnou a neopakovateľnou. Jedná sa o adaptívny plugin, ktorý bude fungovať na všetkých verziách prehliadačov a môže byť ľahko pripojený k WordPress a inému populárnemu systému CMS. Všeobecne platí, že výhody tohto jazdca sú veľmi, takže by ste si mali určite urobiť voľbu v jeho prospech. Predtým, ako začnete s nastavovaním Owl Carousel, je potrebné stiahnuť tento doplnok.

download

Nastavenie Owl Carousel 2 nie je možné, ak nemátestiahli si ho do počítača a keďže ide o krok za krokom, stojí za to od samého začiatku. Takže program je možné stiahnuť pomocou správcov balíčkov, ale sú to pokročilé vývojárske nástroje, takže tu sa dozviete, ako získať tento doplnok štandardným spôsobom. Musíte ísť na oficiálnu stránku doplnku a stiahnuť najnovšiu verziu. Potom by sa všetky prevzaté súbory mali preniesť do adresára vašej lokality a pripraviť si pohodlnú zložku, ktorá sa nazýva rovnaká ako samotný plugin. Upozorňujeme, že tento doplnok je priradený k programu jQuery, takže potrebujete mať túto knižnicu k dispozícii. Keď tento doplnok prevezmete, budete musieť urobiť ďalší krok, konkrétne nastavenie posúvača Owl Carousel 2.

CSS

V sulačnom kolotoče 1.3 zostávajú takmer rovnaké ako v novšej verzii, pridajú sa iba nové funkcie. Základné informácie však budú rovnaké, počnúc pridaním CSS do dokumentu. Takže prvým krokom je pridať riadok do HTML kódu <link rel = "šablóna štýlov" href = "owlcarousel / owl.carousel.min.css">, Čo vám to dáva? Toto je reťazec, ktorý načíta na štítky potrebné štýly na zobrazenie jazdca. Na to môžete dokončiť, urobiť si vizuálne spracovanie sami. Existuje však pohodlnejšie a rýchlejšie riešenie. Môžete tiež pridať riadok <link rel = "štýl" href = "owlcarousel / owl.theme.default.min.css">, ktorý tiež načíta štandardnú témujazdec, ktorý je okamžite pripravený na použitie. Niektoré štýly môžete upraviť tým, že váš posúvač bude jedinečný a neobvyklý a vhodnejší aj pre váš obsah. Samozrejme, nastavenie sóla Carousel v ruštine by bolo veľmi výhodné, ale každý, kto vytvorí webové stránky, by mal pochopiť, že bez znalosti angličtiny, on to nemôže urobiť.

Pripojenie jazyka JavaSpript

Samozrejme, jazdec nebude fungovať bez JS,takže musíte tiež dbať na pripojenie príslušného súboru obsahujúceho požadovaný kód. Ak to chcete urobiť, musíte vložiť riadok kódu z dokumentácie, ale s povinným dodržiavaním jednej podmienky. Každý vie, že JS je programovací jazyk, ktorý vykonáva všetky príkazy v poradí, v tomto prípade by ste mali pridať tento riadok kódu za riadok, ktorý pridá knižnicu jQuery do vášho dokumentu. Viac s JS v prípade tohto posúvača nemusíte nič robiť.

Vytváranie kódu HTML

No, zapli ste jazdca, teraz je časvydávať a upravovať. Najprv musíte písať HTML kód, aby sa posuvník vo všeobecnosti zobrazoval na vašej stránke. Ak to chcete urobiť, musíte vytvoriť kontajner, ktorý bude obsahovať snímky. Môžete to urobiť pomocou značky div, ktorú chcete priradiť triede sova-karuselu. Práve táto trieda zabezpečuje, že všetky štýly súvisiace s posuvníkom budú aktivované. Tiež môžete zaregistrovať inú triedu - owl-theme. Je to pre vás užitočné v prípade, že sa rozhodnete použiť predvolený dizajn alebo si vyskúšať štandardnú verziu jazdca ako základ pre ďalšiu prácu.

Potom musíte každú snímku pridať do samostatného kontajnera s tagom div. Prirodzene, môžete použiť iné značky, ale najlepšie pre jazdcov je táto značka.

Zavolajte na plugin

No, posledná vec, ktorú musíte urobiť, aby vaše stránky mali pripravený posuvník, je použiť tento blok kódu:

$ (dokument) .ready (funkcia () {

$ (".wl-kolotoč") owlCarousel ();

});

Zabezpečí sa spustenie posúvačafunkcia, tj posúvanie obsahu pri načítaní stránky. S rovnakým kódom môžete pripojiť owl carousel na WordPress. Nastavenia tohto pluginu sú početné a rôznorodé a teraz sa dozviete o najdôležitejších bodoch.

Úprava vzhľadu a funkčnosti posúvača

Takže, aké príkazy môžete použiť,na nastavenie posúvača? Najprv si musíte pamätať príkazy položiek, pretože s ním môžete špecifikovať určitý počet snímok vo vašom posuvnom ovládači. Príkaz smyčky vám umožňuje zvoliť, či chcete posúvať posúvač, alebo zastaviť rolovanie na poslednom prvku. K dispozícii je aj príkaz Drag, ktorý má niekoľko možností, napríklad myš a dotyk. V prvom prípade môžete tak urobiť tak, že prvky posúvača je možné posúvať pomocou orezanej myši a v druhom prípade - dotykom (tento príkaz je vhodný pre mobilné zariadenia). Ďalším dôležitým príkazom je navigácia, ktorá zahŕňa zobrazenie navigačných šípok. Spolu s ním môžete použiť príkaz navText pridaním štítkov na navigačné tlačidlá. Tiež by ste nemali zabudnúť na príkaz autoplay, ktorý vám umožňuje zapnúť a vypnúť automatické spustenie prezentácie posúvača pri načítaní stránky. Spolu s týmto príkazom môžete použiť aj autoplayTimeout, pre ktorý môžete špecifikovať konkrétnu hodnotu v milisekundách, ktorá určí čas medzi automatickým preklopením každej snímky.

Ak používate adaptívny dizajn webu, potomdizajn vašej stránky sa automaticky mení v závislosti od toho, na akom zariadení sa zobrazuje, potom si musíte pamätať na odpovedajúci príkaz, ktorý vám umožňuje nastaviť počet zobrazených snímok v závislosti od šírky obrazovky, na ktorej je zobrazená stránka.