Nastavení posouvání slidů

Nastavení posouvání slidů

V této části si ukážeme nastavení týkající se posouvání slidů ve slideru.

Změnění efektu při pohybu slidů na prolnutí

Defaultně se slidy ve slideru při přepínání slidu posouvají zprava doleva. Pokud ale chceme, tak si tento efekt můžeme přepnout na prolnutí. Uděláme to nastavením vlastnosti fade na hodnotu true.

$('.muj-slider').slick({
    fade: true // namísto posouvání slidů zprava doleva se slidy budou prolínat
});

Zapnutí/Vypnutí nekonečného posouvání slidů

Defaultně můžeme ve slideru slidy posouvat do nekonečna. Neexistuje žádná hranice kde slidy končí, namísto toho se posouvají stále od začátku nebo od konce když dojedeme na začátek nebo na konec slideru. Pokud tuto vlastnost chceme vypnout abychom neměli nekonečný slider, tak nastavíme vlastnost infinite na hodnotu false.

$('.muj-slider').slick({
    infinite: false // slider nebude nekonečný
});

Zapnutí/Vypnutí automatického posouvání

Pokud chceme nastavit aby se slidy ve slideru automaticky posouvali, tak nastavíme vlastnost autoplay na hodnotu true.

$('.muj-slider').slick({
    autoplay: true // slidy se budou automaticky posouvat
});

Nastavení rychlosti automatického posouvání

Pokud chceme nastavit čas, který musí uběhnout mezi dvěma slidy při automatickém posouvání, tak k tomu použijeme nastavení autoplaySpeed. Tomuto nastavení nastavujeme jako hodnotu číslo, které představuje milisekundy. Defaultní hodnota nastavení autoplaySpeed je 3000 milisekund.

$('.muj-slider').slick({
    autoplay: true,
    autoplaySpeed: 5000 // automatické posunutí se provede po každých pěti sekundách
});

Zapnutí/Vypnutí pozastavení automatického posouvání při najetí myši na slider

Pokud máme zapnuté automatické posouvání a najedeme myší na slider, tak se automatické posouvání pozastaví. Pokud chceme tuto vlastnost vypnout, tak nastavíme nastavení pauseOnHover na hodnotu false.

$('.muj-slider').slick({
    autoplay: true,
    pauseOnHover: false // při najetí myši na slider se automatické posouvání nepozastaví
});

Zapnutí/Vypnutí pozastavení automatického posouvání při najetí myši na navigaci slideru

Pokud chceme při najetí myši na navigaci slideru pozastavit automatické posouvání, tak nastavíme nastavení pauseOnDotsHover na hodnotu true.

$('.muj-slider').slick({
    dots: true,
    autoplay: true,
    pauseOnDotsHover: true // při najetí myši na navigaci se pozastaví automatické posouvání
});

Zapnutí/Vypnutí pozastavení automatického posouvání při focusnutí slideru

Při focusnutí slideru (když na něj třeba klikneme) se defaultně pozastaví automatické posouvání slidů. Pokud tuto vlastnost chceme vypnout, tak nastavíme nastavení pauseOnFocus na hodnotu false.

$('.muj-slider').slick({
    autoplay: true,
    pauseOnFocus: false // při focusnutí slideru se automatické posouvání nepozastaví
});

Zapnutí/Vypnutí posouvání slidů pomocí šipek při focusnutí slideru

Defaultně při focusnutí slideru (když na něj třeba klikneme) můžeme jeho slidy posouvat pomocí šipek na klávesnici. Pokud tuto vlastnost chceme vypnout, tak nastavíme nastavení accessibility na hodnotu false.

$('.muj-slider').slick({
    accessibility: false // do slideru se nebudeme moci přepnout a ovládat jej šipkami
});

Přenastavení o kolik slidů se bude ve slideru posouvat

Defaultně se slidy ve slideru posouvají o jeden slide. Pokud to chceme změnit, tak to můžeme udělat pomocí nastavení slidesToScroll.

$('.muj-slider').slick({
    slidesToScroll: 2 // slidy se budou posouvat o dva slidy
});

Zapnutí/Vypnutí posouvání slidů pomocí myši

Defaultně můžeme slidy ve slideru posouvat pomocí myši. Pokud tuto vlastnost chceme vypnout, tak nastavíme nastavení draggable na hodnotu false. Ještě existuje nastavení swipe, které dělá stejnou věc. Na oficiálních stránkách Slicku jsem ale nenašel jaký je mezi nastavením draggable a swipe rozdíl.

$('.muj-slider').slick({
    draggable: false // slidy nebudeme moci posouvat pomocí myši
});

Zapnutí/Vypnutí posunutí na slide na který jsme se myší posunuli nejblíže

Defaultně nám Slick nedovolí posunout se myší o libovolné množství slidů. Umožní nám posunout se jen o tolik slidů kolik máme nastaveno v nastavení slidesToScroll. Pokud ale chceme aby se dalo posunout přesně na slide na který jsme se myší posunuli, tak musíme nastavit nastavení swipeToSlide na hodnotu true.

$('.muj-slider').slick({
    swipeToSlide: true // budeme se moci posunout přesně na slide na který jsme se posunuli myší
});

Nastavení velikosti odporu krajních stran u konečného slideru

U slideru, který není nekonečný (má nastavení infinite nastaveno na hodnotu false) můžeme nastavit velikost odporu jeho krajních stran při tažení myši. K nastavení odporu krajních stran slideru slouží nastavení edgeFriction. Jeho defaultní hodnota je 0.15.

$('.muj-slider').slick({
    inifinite: false,
    edgeFriction: 0.5 // nastavení odporu krajních stran slideru při jejich přejetí myší
});

Zapnutí/Vypnutí posouvání slidů při pohybování myši

Defaultně při tažení myši po slideru uvidíme jak se slidy pohybují. Pokud ale nechceme aby se slidy při tažení pohybovali a jen se posunuli po ukončení tažení myši, tak nastavíme nastavení touchMove na hodnotu false.

$('.muj-slider').slick({
    touchMove: false // neuvidíme jak se slidy při pohybování myši posouvají
});

Nastavení vzdálenosti, kterou musíme při posouvání slidů myší přejet abychom se dostali na další slide

Pomocí vlastnosti touchThreshold si můžeme nastavit jakou vzdálenost musíme při posouvání slidů myší přejet abychom se dostali na další slide. Vzdálenost, kterou musíme přejet abychom se dostali na další slide se počítá tímto způsobem: (1/touchThreshold) * šířka slideru. Defaultní hodnota nastavení touchThreshold je 5.

$('.muj-slider').slick({
    touchThreshold: 3 // pro posunutí na další slide budeme muset přejet 1/3 šířky slideru
});

Zapnutí vertikálního módu

Pokud chceme aby se slidy ve slideru nepohybovali horizontálně ale vertikálně, tak můžeme nastavit nastavení vertical na hodnotu true.

$('.muj-slider').slick({
    vertical: true // slidy se budou posouvat vertikálně
});

Posouvání slidů myší vertikálně namísto horizontálně

Defaultně posouváme slidy myší horizontálně i když jsme třeba zapnuli vertikální mód. Pokud chceme slidy posouvat myší vertikálně namísto horizontálně, tak nastavíme nastavení verticalSwiping na hodnotu true.

$('.muj-slider').slick({
    verticalSwiping: true // myší budeme slidy posouvat vertikálně namísto horizontálně
});

Změna směru slideru

Pokud chceme změnit směr slideru na right-to-left, tak můžeme nastavit nastavení rtl na hodnotu true. To nám ale pravděpodobně stačit nebude a budeme muset na slideru v CSS kódu ještě přenastavit vlastnost rtl. Poté ale pravděpodobně budou elementy ve slideru převrácené. Takže pokud tuto vlastnost budete chtít použít, je potřeba si se sliderem a jeho elementy v CSS trochu pohrát.

$('.muj-slider').slick({
    rtl: true // změna směru slideru na right-to-left
});

Nastavení rychlosti posouvání/prolínání slidů

Defaultní doba, kterou trvá posunutí/prolnutí slidů je 300 milisekund. Pokud to chceme změnit, tak můžeme přenastavit nastavení speed.

$('.muj-slider').slick({
    speed: 1000 // posunutí slidů bude trvat jednu sekundu
});

Povolení/Zakázání interakce se sliderem při posouvání/prolínání slidů

Defaultně nemůžeme slider ovládat když se provádí posouvání/prolínání slidů. Pokud chceme povolit abychom mohli slider ovládat i v době posouvání/prolínání slidů, tak musíme nastavit nastavení waitForAnimate na hodnotu false.

$('.muj-slider').slick({
    autoplay: true,
    speed: 2000,
    waitForAnimate: false // slider budeme moci ovládat i když bude probíhat posouvání slidů
});

Zapnutí/Vypnutí používání CSS vlastností

Pokud z nějakého zvláštního důvodu potřebujeme vypnout používání CSS transition vlastností, tak můžeme nastavit nastavení useCSS na hodnotu false. Pokud potřebujeme vypnout používání CSS transform vlastností, tak můžeme nastavit nastavení useTransform na hodnotu false. Nevím proč byste to chtěli vypínat, ale ty možnosti tu jsou.

$('.muj-slider').slick({
    useCSS: false, // vypne používání CSS transition vlastností
    useTransform: false // vypne používání CSS transform vlastností
});

Nastavení ease funkce pro posouvání/prolínání slidů

Pokud chceme nastavit CSS ease funkci pro posouvání/prolínání slidů, tak ji můžeme nastavit pomocí nastavení cssEase. Defaultní ease funkce je 'linear', ale můžeme nastavit jakoukoliv CSS ease funkci, takže třeba i cubic-bezier. Dále ještě existuje nastavení easing, které umožňuje nastavit JQuery easing metodu (můžeme použít také easing knihovny). Nastavení easing je ale ignorováno pokud jsou k dispozici CSS transitions.

$('.muj-slider').slick({
    cssEase: 'ease-in' // nastavení CSS ease funkce pro posouvání slidů
});