Slick Tutoriál

Eventy a metody

7.
část

Eventy a metody

V této části si ukážeme co to jsou eventy a metody. Občas se to může hodit.

Eventy

Eventy nám umožňují nastavit si funkce, které se spustí po proběhnutí nějaké akce. Můžeme si například nastavit funkci, která se zavolá když se změní slide nebo třeba když uživatel přetáhne myší přes okraj slideru. Funkci, kterou slider zavolá po proběhnutí nějaké akce nastavíme pomocí metody jménem on. Této metodě předáváme typ eventu pro který se bude funkce volat a funkci samotnou.

// tato funkce se zavolá po přetažení slidů myší
$('.muj-slider').on('swipe', function(event, slick, smer){
    console.log(smer);
});

// tato funkce se zavolá po přejetí okraje slideru
$('.muj-slider').on('edge', function(event, slick, smer){
    console.log('uživatel přejel okraj slideru');
});

// tato funkce se zavolá před posunutím slidu
$('.muj-slider').on('beforeChange', function(event, slick, aktualniSlide, dalsiSlide){
    console.log(dalsiSlide);
});

Zde je přehled eventů, kterým můžeme naslouchat:

afterChange

Spouští se po změně slidu. Parametry funkce: slick, aktualniSlide

beforeChange

Spouští se před změnou slidu. Parametry funkce: slick, aktualniSlide, dalsiSlide

breakpoint

Spouští se po dosažení breakpointu. Parametry funkce: event, slick, breakpoint

destroy

Spouští se po zničení nebo unslicknutí slideru. Parametry funkce: event, slick

edge

Spouští se když uživatel přejede okraj slideru. Parametry funkce: slick, směr

init

Spouští se po první inicializaci slideru. Parametry funkce: slick

reInit

Spouští se po kaže reinicializaci slideru. Parametry funkce: slick

setPosition

Spouští se po změně pozice/velikosti. Parametry funkce: slick

swipe

Spouští se po posunutí slidů pomocí myši. Parametry funkce: slick, směr

lazyLoaded

Spouští se po načtení obrázku při zapnutém lazy loadingu. Parametry funkce: event, slick, image, imageSource

lazyLoadError

Spouští se pokud při zapnutém lazy loadingu dojde při načítání obrázku k chybě. Parametry funkce: event, slick, image, imageSource

Metody

Metody nám umožňují ovládat slider pomocí kódu. Máme k dispozici metodu pro pozastavení slideru, přesunutí na další slide, nastavení vlastnosti slideru, přidání slidu a mnoho dalších. Metody se volají přes metodu slick, kterou používáme také k tvorbě slideru. Předáváme jí jméno metody a popřípadě i nějaké argumenty.

// přidání nového slidu
$('.muj-slider').slick('slickAdd',"<div>nový slide</div>");

// získání aktuálního slidu
const aktualniSlide = $('.muj-slider').slick('slickCurrentSlide');

Zde je přehled všech metod, které nám Slick poskytuje:

slickCurrentSlide

Vrací index aktuálního slidu.

slickGoTo

Přesunutí se na slide podle předaného indexu. Jako parametr předáváme index a popřípadě také boolean hodnotu, která značí že se nemá animovat pokud bude true.

slickNext

Přesunutí na další slide.

slickPrev

Přesunutí na předchozí slide.

slickPause

Pozastaví automatické přehrávání.

slickPlay

Spustí automatické přehrávání.

slickAdd

Přidá do slideru nový slide. Jako parametr předáváme řetězec s html nebo DOM objekt, který se má do slideru přidat jako slide. Dále můžeme předat také index, který značí na které místo se má slider přidat. Pokud jej nepředáme, tak se slide přidá na konec. Také můžeme přidat ještě jeden parametr, který je typu boolean a určuje jestli se má slide přidat před index. Pokud index nepředáme, tak tato hodnota bude značit že se má slide přidat na začátek.

slickRemove

Odstraní slide podle předaného indexu. Jako parametr předáváme index a můžeme také předat boolean hodnotu, která určuje jestli se má odstranit slide před indexem. Pokud index nepředáme, tak tato hodnota značí že se má odstranit první slide. Pokud nepředáme žádný parametr, tak se odstraní poslední slide.

slickFilter

Vyfiltruje slidery použitím JQuery filter funkce. Jako parametr předáváme selektor nebo funkci.

slickUnfilter

Odstraní aplikované filtrování. Jako parametr předáváme index.

slickGetOption

Vrátí hodnotu předaného nastavení. Jako parametr tedy předáváme název nastavení u kterého chceme získat hodnotu.

slickSetOption

Přenastaví předané nastavení. Jako parametr předáváme nastavení které chceme přenastavit, hodnotu kterou mu chceme nastavit a můžeme také předat boolean hodnotu, která určuje jestli se má refreshovat. Pokud se změna týká UI, tak bychom měli tuto hodnotu nastavit na true, tak je to napsáno na oficiálních stránkách.

unslick

Odstraní slider.

getSlick

Vrátí slick objekt.

Části Tutoriálu