Obsah
Vytvoříme posuvník vyvinutý pomocí
Jquery Y
Nivo Slider, bez potřeby pluginu a že se můžeme přizpůsobit našim webovým stránkám.
K tomu použijeme
Jquery framework, což je
knihovna usnadňující práci s jazykem Javascript. Knihovnu stáhneme z
Jquery.com, je také možné, že ho můžete použít tažením
googleapis.com pomocí tohoto kódu na stránce html přidejte tento skript.
Pokud jste si jej stáhli ze stránky Jquery a nahráli do adresáře na vašem webu, musíte jej uvést tak, aby ukazoval na vaši doménu jako následující příklad:
Nyní pojďme stáhnout
Posuvník Nivo co je
Knihovna Jquery, která nám umožní vytvořit posuvník. Odtud si můžete stáhnout Nivo slider zdarma. Rozbalte soubor v našem adresáři, zde vidíme strukturu webu.
Nyní vytvoříme soubor index.html pro náš web, do záhlaví vložíme knihovny a šablony stylů. Můžeme vidět knihovnu Jquery, knihovnu posuvníků nivo a vlastní šablony stylů Nivo slider, poté je můžeme přizpůsobit.
Nyní vytvoříme kontejner pro naše obrázky a pro posuvník, a aby to bylo možné zobrazit, byl vytvořen ve stejném indexu.html (Lze jej také vytvořit v souboru šablony stylů CSS, aby vyhovoval každý).
Začneme strukturou webu a samotným posuvníkem, vložením obrázků k zobrazení a zprávou.
Poté aktivujeme plugin nivo Silder a pošleme mu parametry o typu efektu, době mezi animací, pauze mezi obrázkem a mnoha dalších, které lze vidět v dokumentaci Nivo Slider.
Všimněme si, že je aktivováno id
#silnější stejný, kde definuji obrázky, takže pokud chci mít více než jeden posuvník, budu muset replikovat stejnou strukturu a aktivovat ji pro odpovídající id.
Výsledkem testování index.html v prohlížeči je:
Zde vidíme druhý snímek, níže vidíme počet snímků 1 a 2 a výchozí odkazy Předchozí (předchozí) Další (další) vylepšíme pohled na to pomocí css.
Čísla můžeme změnit na odrážky jednoduše tak, že se podíváme na nivo-silder.css
.nivo-controlNav {zarovnání textu: vlevo; polstrování: 0; poloha: relativní; z-index: 10; } .nivo-controlNav na {display: inline-block; šířka: 10px; výška: 10px; pozadí: url (bullets.png.webp) no-repeat; textová odrážka: -9999px; hranice: 0; okraj: 0 2px; } .nivo-controlNav a.active {pozice na pozadí: 0 100%; } .nivo-directionNav to {display: block; šířka: 30px; výška: 30px; pozadí: url (arrows.png.webp) no-repeat; textová odrážka: -9999px; hranice: 0; nahoře: auto; dole: -36px; z-index: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; poloměr ohraničení: 2px; } a.nivo-nextNav {pozice na pozadí: 160% 50%; vpravo: 0px; } a.nivo-prevNav {pozice na pozadí: -60% 50%; vlevo: auto; vpravo: 35px; } Výsledkem této změny budou čísla jako odrážky vlevo a odkazy jako šipky vpravo.
Funkčnost rozšíříme zobrazením bloku dat na jednom ze snímků
Modifikujeme kód, který již máme, změníme odstavec na snímku 2 pro blok, který zavolám s id # block2, poté vytvořím blok a použiji skrytý styl tak, aby byl viditelný pouze tehdy, když je aktivován snímek 2.
Výsledek je následující:
Můžete také vložit miniatury obrázků. Další možností je generovat obsah dynamicky z mysql a php nebo jej použít v šabloně CMS, jako je joomla nebo wordpress. Dodává se s mnoha již naprogramovanými pluginy, ale s několika řádky kódu můžeme vytvořit vlastní komponentu. Doufám, že vám to posloužilo.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
