Responzivita

Responzivita

U Slick sliderů můžeme jednoduše provádět také responzivitu. V této části se dozvíte jak.

Měnění nastavení slideru pro různé šířky obrazovky

Pokud chceme měnit nastavení slideru v závislosti na šířce obrazovky, tak můžeme využít nastavení responsive. Tomuto nastavení předáváme pole objektů. Každý objekt v poli obsahuje šířku a nastavení, která se mají aplikovat. Defaultně Slick pro responzivitu používá desktop-first strategii, takže se vždy aplikuje nejmenší možná šířka, která je větší nebo se rovná šířce obrazovky. Pokud bychom chtěli aby Slick používal mobile-first strategii, tak bychom to museli přepnout pomocí nastavení mobileFirst.

$('.muj-slider').slick({
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [ // vytvoření responzivity
        {
            breakpoint: 1024, // šířka
            settings: { // nastavení, která se aplikují
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});

Přepnutí na mobile-first strategii

Slick defaultně používá pro responzivitu desktop-first strategii, takže se vždy aplikuje nejmenší možná šířka, která je větší nebo se rovná šířce obrazovky. Pokud ale chceme použít mobile-first strategii, tak musíme nastavit nastavení mobileFirst na hodnotu true. Potom se tedy vždy aplikuje největší možná šířka, která je menší nebo se rovná šířce obrazovky.

$('.muj-slider').slick({
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    mobileFirst: true, // přepnutí na mobile-first strategii
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});

Změnění podle čeho bude Slick brát šířku pro responzivitu

Defaultně Slick bere šířku kterou používá pro určení, která nastavení se aplikují podle šířky obrazovky, nebo přesněji podle šířky okna. Pokud ale chceme, tak můžeme specifikovat, že se šířka bude brát podle šířky slideru namísto šířky okna. Slouží k tomu nastavení respondTo. Tomuto nastavení nastavujeme jednu z těchto tří hodnot: 'window' - okno, 'slider' nebo 'min' - menší z předešlích dvou.

$('.muj-slider').slick({
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    respondTo: 'slider', // šířka pro responzivitu se bude brát podle šířky slideru
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});