Co je to slider?

Slider je obrazová prezentace na webové stránce. Příkladem mohou být různé slidery produktů na e-shopech, či několik střídajících se fotek s textem. Jedná se o nástroj, který umožňuje zobrazit na jednom místě více informací. V našem případě budeme pro tvorbu sliderů využívat nástroj Smart Slider 3, který má jak verzi zdarma, tak verzi placenou. Ty se od sebe liší především rozsahem možností úprav a počtem předvytvořených šablon sliderů. Budeme si ukazovat práci s placenou verzí, ale není problém využít i verzi neplacenou, která vás však může v některých ohledech omezit. Pokud si plugin chcete zakoupit nebo si jenom prostudovat rozdíly mezi placenou a neplacenou verzí, můžete to udělat zde (tady dát affiliate link na smart slider).

Jak můžeme slidery využít?

Slidery se využívají především k prezentaci novinek, které se objevují na webu. V případě e-shopu to mohou být produkty a například u blogu se může jednat o nejnovější nebo trendy články. Tento nástroj nám umožní využít relativně málo plochy k zobrazení většího množství obsahu. Ovšem slidery můžeme využít například i při zobrazování galerie fotek.

Smart Slider 3

Je jeden z nejznámějších nástrojů na tvorbu sliderů. Obsahuje řadu předvytvořených šablon, které stačí lehce upravit podle vašich potřeb, nebo můžete využít již zabudovaného editoru WYSIWYG (neboli „What you see is what you get“ – „Co vidíš, to dostaneš“), a navrhnout si tak vlastní design. WYSIWYG je typ editoru, u kterého editujete přímo to, co vidíte, a není zde třeba psát složitý kód. Vaší kreativitě se meze nekladou. Omezeni pak můžete být akorát neplacenou verzí pluginu. Placená verze pluginu pro jeden web stojí zhruba 1200 Kč, a s ní dostanete 120+ šablon, možnost animací a dalších efektů, nebo třeba podporu ze strany výrobce pluginu v případě problémů.

Druhy sliderů

Obecně můžeme slidery nacházet ve dvou provedeních. V klasickém, kdy je vidět pouze jeden snímek v jeden okamžik, nebo Carousel 2, kdy je vidět více sliderů na jedné obrazovce. Carousel se využívá například pro prezentaci produktů, článků, případně fotek. Záleží čistě na vás, který z těchto dvou typů zvolíte. Dále existují tzv. dynamické slidery. Dynamický slider se tvoří tak, že si předpřipravíte šablonu jednoho slideru, nastavíte si proměnné a slider se následně doplňuje sám, například produkty či příspěvky.

Předpřipravené šablony

V neplacené verzi nástroje Smart Slider 3 máte k dispozici 14 šablon pouze v klasickém provedení. Ovšem pokud si budete chtít slider vytvořit sami bez použití šablony, v používání prvků nejste limitováni (kromě animací a efektů). Pro prémiové uživatele pluginu je k dispozici 129 šablon obou typů. Pro začínající uživatele, kteří se s tímto nástrojem a tvorbou webu obecně teprve učí, doporučujeme využít nějakou z šablon, a tu si pouze doupravit do stylu vašeho webu (například změněním barev, celkového vzhledu či doplněním vlastního obsahu). Případně si můžete nastavit proměnné pro dynamický slider.

Ukázka tvorby slideru z šablony

Jako jednoduchý příklad si ukážeme vytvoření a upravení jednoho slideru z šablony.

1 -> V prvním kroku je důležité nainstalovat/koupit si plugin Smart Slider 3 (Nextend). Plugin následně aktivujte.
2 -> Pokud chcete, Smart Slider vám přímo nabídne tutoriál, který vám ukáže, jak máte dál postupovat.
3 -> Zvolte možnost „Nový projekt“ -> „Začít podle šablony“ („Start with a Template“) – > Vyberte si šablonu, která nejlépe vyhovuje vašim představám a klikněte na „Import“.
4 -> Dále doporučuji smazat všechny slidy. V přehledu nahoře uvidíte předdefinované slidy. Klikněte na tři tečky v pravém horním rohu a dejte „Smazat“. Ponechte si jen jeden slide, který budeme v dalším kroku editovat.
5 -> U prvního slideru klikněte na „Editovat“. Ten se vám objeví v již zmíněném WYSIWYG editoru (tutoriál, jak v tomto editoru pracovat, bude popsán již brzy v novém článku.)

Nastavení slideru a jeho prvků

V tomto bodu nastavíme jednotlivé prvky slideru.
-> Vraťte se zpět na stránku sliderů.

Nastavení ovládacích prvků:

1 -> V menu zvolte možnost „Controls“.
2 -> V první řadě si nastavte šipky ovládání. Nejprve zaškrtněte, zda je chcete nebo ne, pak si můžete vybrat styl a jejich barvu.
3 -> Dalším z ovládacích prvků jsou tečky. Opět zvolte, zda je chcete, a vyberte styl a barvu.

Nastavení Autoplay (funkce umožní střídání sliderů bez nutnosti uživatelské žádosti):

1 -> V menu zvolte možnost „Autoplay“.
2 -> Zaškrtněte možnost Autoplay jako povolenou.
3 -> V možnosti „Slide duration“ zadejte čas v milisekundách, tzn. počet sekund krát 1000.
Dodatečné nastavení sliderů:
– Slidery se automaticky zobrazují od prvního k poslednímu. Pokud chcete, aby se zobrazovaly náhodně, v menu v nastavení klikněte na „Slides“.
– U Carouselu se slidery mění všechny najednou. Toto můžete změnit v sekci „Animations“ zaškrtnutím možnosti „Single Switch“.

Responzivita

Po dokončení úprav je třeba zkontrolovat, jak slider vypadá při zobrazení na telefonu či tabletu. Případně jej doupravit tak, aby vypadal dobře ve všech rozměrech. Pro testování responzivity můžete využít při editaci slideru tlačítka v levém horním rohu (je ve tvaru oka s nadpisem „Preview“), které vám umožní nastavit šířku slideru pro zobrazení. Po rozkliknutí si nahoře určíte šířku a výšku zobrazení, a můžete tak zkontrolovat, zda se někde nezobrazuje něco špatně.