Nastavení slidů

Nastavení slidů

V této části si ukážeme nastavení týkající se slidů, tedy elementů uvnitř slideru.

Nastavení startovního slidu

Defaultně se jako první slide v slideru zobrazí element, který napíšeme do elementu představující slider jako první. Pokud bychom chtěli začít jiným slidem, tak to můžeme nastavit pomocí nastavení initialSlide. Tomuto nastavení předáváme číslo, které určuje který slide se zobrazí. Začíná se od nuly, takže pokud chceme jako startovní slide nastavit například druhý element, tak nastavíme toto nastavení na hodnotu 1.

<div class="muj-slider">
    <img src="./img/Image1.jpg">
    <!-- následující element se nastaví jako startovní slide -->
    <img src="./img/Image2.jpg">
    <img src="./img/Image3.jpg">
</div>

<script>
    $('.muj-slider').slick({
        initialSlide: 1 // jako startovní slide se nastaví druhý element
    });
</script>

Změna počtu slidů, které se najednou zobrazí

Defaultně se ve slideru najednou zobrazí jen jeden slide, který se roztáhne přes celou šířku slideru. Pokud ale chceme najednou zobrazit více sliderů, tak můžeme přenastavit nastavení slidesToShow.

$('.muj-slider').slick({
    slidesToShow: 3 // najednou se ve slideru zobrazí 3 slidy
});

Ponechání šířky slidů

Defaultně Slick změní šířku elementů uvnitř slideru tak, aby se zaplnil prostor slideru podle nastavení slidesToShow. Pokud to ale chceme zakázat a šířku slidů neměnit, tak můžeme nastavit nastavení variableWidth na hodnotu true.

$('.muj-slider').slick({
    variableWidth: true // elementy uvnitř slideru si ponechají vlastní šířku
});

Vycentrování aktivního slidu

Pokud v slideru máme nastaveno že se zároveň zobrazuje více slidů, tak se aktivní slide bude zobrazovat v levé části slideru. Pokud bychom jej chtěli zobrazit uprostřed, tak můžeme změnit nastavení centerMode na hodnotu true. Po tomto nastavení můžeme po krajích slideru vidět části dalších slidů, to můžeme změnit pomocí vlastnosti centerPadding. Tuto vlastnost nastavujeme na true jen při liché hodnotě v nastavení slidesToShow.

$('.muj-slider').slick({
    slidesToShow: 3,
    centerMode: true // aktivní slide se zobrazí uprostřed slideru
});

Změnění mezer po stranách slideru při center módu

Při nastavení vlastnosti centerMode na hodnotu true nám můžou po stranách slideru vzniknout mezery. Jejich velikost se dá změnit pomocí nastavení centerPadding. Tomuto nastavení nastavujeme jako hodnotu řetězec s hodnotou a pixely nebo procenty.

$('.muj-slider').slick({
    slidesToShow: 3,
    centerMode: true,
    centerPadding: '10px' // po stranách slideru budou mezery o velikosti 10 pixelů
});

Lazy loading obrázků ve slideru

Pokud chceme, tak můžeme slideru nastavit že pokud obsahuje obrázky, načtou se až poté co se ve slideru objeví. Takže uživatel nemusí stahovat všechny obrázky, když se na ně třeba ve slideru ani nechce podívat. Tuto funkci zapneme nastavením vlastnosti lazyLoad na hodnotu true.

$('.muj-slider').slick({
    lazyLoad: true // obrázky se stáhnou až se ve slideru objeví
});

Změna CSS vlastnosti z-index všech slidů v slideru

Elementy uvnitř slideru mají defaultně nastavenou CSS vlastnost z-index na hodnotu 1000. Pokud ji chceme změnit na jinou hodnotu, uděláme to pomocí nastavení zIndex.

$('.muj-slider').slick({
    zIndex: 5 // změná CSS vlastnosti z-index všech slidů ve slideru
});