Co je to Slick a jeho instalace
Vítejte v tutoriálu o vytváření sliderů pomocí Slicku. Jedná se o JQuery plugin, který nám umožňuje na našich webových stránkách jednoduše vytvářet různé slidery. Tyto slidery jsou plně přizpůsobitelné a můžeme si je nastavit a nastylovat tak jak potřebujeme.
Slick poskytuje spoustu funkcí. Umožňuje nám vytvářet responzivní slidery, nekonečné slidery, zapnout automatické posouvání, zobrazit navigaci, šipky a mnoho dalšího. Slick nám toho umožňuje nastavit opravdu hodně.
Pokud chcete Slick začít používat, tak se můžete podívat na jeho oficiální stránky, kde se můžete podívat na pár příkladů s ukázkami kódu a přehledem všech nastavitelných vlastností. Určitě podle toho pochopíte jak Slick začít používat, ale možná pro vás na začátku bude trochu problém vyznat se ve všech těch nastaveních, které máte k dispozici. Proto jsem vytvořit tento tutoriál, ve kterém vás Slickem postupně provedu. Snažil jsem se jednotlivá nastavení seskupit logicky dohromady, abyste tento tutoriál mohli později také použít když nebudete přesně vědět jak něco nastavit nebo udělat.
Instalace
Abychom mohli Slick začít používat, tak si jej nejdříve musíme stáhnout nebo použít CDN. Slick můžete stáhnout odsud. Najdete tam také CDN, pokud si jej nechcete stahovat. Pokud si Slick, stáhnete, tak dostanete zazipovaný soubor se spoustou souborů. Ale jediný soubor který potřebujete je slick.min.js. Měl by tam být také soubor s CSS styly, ale ten nepotřebujeme, protože si slidery budeme stylovat sami. A protože Slick je JQuery plugin, tak si budeme muset stáhnout také JQuery. Stáhnout jej můžete odsud. Pokud ale raději chcete použít CDN, podívejte se zde. Až máme Slick a JQuery stažené, tak si je napojíme na naše webové stránky. Takže před konec body elementu přidáme script tagy s odkazem na JavaScript soubory Slicku a JQuery.
<script src="./js/jquery.min.js"></script>
<script src="./js/slick.min.js"></script>První slider
Po napojení Slicku a JQuery na naše webové stránky můžeme Slick začít používat. Pokud chceme vytvořit nějaký slider, tak si jej nejdříve musíme napsat v HTML. Vytvoříme si nějaký element, který bude obsahovat všechny slidy, které se ve slideru budou zobrazovat. Poté pomocí JQuery jednoduše tento element vybereme a zavoláme metodu slick. Pokud metodu slick zavoláme bez žádného parametru, tak se nám vytvoří slider s defaultními nastaveními. Nebude vypadat hezky, ale na to jak jej nastylovat se podíváme v další části.
<div class="muj-slider">
<img src="./img/Image1.jpg">
<img src="./img/Image2.jpg">
<img src="./img/Image3.jpg">
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/slick.min.js"></script>
<script>
$('.muj-slider').slick();
</script>