Pár dalších nastavení

Pár dalších nastavení

Tuto část tutoriálu jsem věnoval pár dalším nastavením, které jsem nezařadil do žádné jiné části tutoriálu. Většinu těchto nastavení jsem nepochopil nebo mi nefungovali, takže tu jen většinou vysvětlím k čemu slouží a někde ani to ne.

Použití slideru jako navigace pro jiný slider

Slick nám umožňuje použít slider jako navigaci pro jiný slider. Takže si můžeme vytvořit například nějaký menší slider s menší velikostí obrázků a nad ním nějaký větší slider, kde se vybraný obrázek zobrazí ve větší velikosti. Následující ukázka ukazuje jak na to. Aby byl slider navigací pro jiný slider, jen mu v nastavení asNavFor přiřadíme řetězec se jménem třídy nebo id jiného slideru.

<div class="muj-slider">
    <img src="./img/Image1.jpg">
    <img src="./img/Image2.jpg">
    <img src="./img/Image3.jpg">
    <img src="./img/Image1.jpg">
    <img src="./img/Image2.jpg">
    <img src="./img/Image3.jpg">
</div>
<!-- tento slider bude navigací pro předchozí slider -->
<div class="nav-slider">
    <img src="./img/Image1.jpg">
    <img src="./img/Image2.jpg">
    <img src="./img/Image3.jpg">
    <img src="./img/Image1.jpg">
    <img src="./img/Image2.jpg">
    <img src="./img/Image3.jpg">
</div>

<script>
    $('.muj-slider').slick({
        fade: true,
        arrows: false,
        accessibility: false,
        draggable: false
    });
    $('.nav-slider').slick({
        centerMode: true,
        centerPadding: "0px",
        slidesToShow: 3,
        swipeToSlide: true,
        autoplay: true,
        asNavFor: 'muj-slider' // tento slider bude navigací pro slider s třídou muj-slider
    });
</script>

Více řad ve slideru

Slick nám umožňuje vytvářet také víceřádkové slidery. Pro přidání více řad nastavíme nastavení rows na větší číslo než 1. Pro nastavení kolik slidů bude v každém řádků potom můžeme použít nastavení slidesPerRow. Mě se vytvoření víceřádkového slideru nedařilo, takže tu nenajdete ani ukázku kódu. Pokud byste ale potřebovali víceřádkový slider vytvořit, tak se zkuste podívat třeba zde.

Nastavení focusOnSelect

Nastavení focusOnSelect slouží k focusnutí vybraného elementu. Takto je to napsáno na oficiálních stránkách Slicku. Takže se pravděpodobně při posunutí slidů focusneme na aktivní slide, to si myslím já.

Nastavení slide

Netuším k čemu nastavení slide slouží. Na oficiální stránkách je napsáno že tomuto nastavení nastavujeme element query, které se použije jako slide.

Nastavení customPaging

Nevím k čemu nastavení customPaging slouží. Možná vám pomůže tento příklad pokud se chcete dozvědět k čemu to slouží.