Šipky a navigace

Šipky a navigace

V této části si ukážeme všechna nastavení, která se týkají šipek a navigace slideru. Také si ukážeme jak můžeme šipky a navigaci nastylovat.

Zobrazení/Skrytí šipek

Slick slidery mají defaultně zapnuté šipky, které se zobrazí aby pomocí nich mohl uživatel posouvat elementy v slideru. Pokud šipky zobrazovat nechceme, tak můžeme nastavit nastavení arrows na hodnotu false, jak ukazuje následující ukázka. Nastavení slideru píšeme jako vlastnosti objektu, který předáváme slick metodě jako parametr.

$('.muj-slider').slick({
    arrows: false // šipky pro ovládání slideru se nezobrazí
});

Změnění elementu do kterého se umístí šipky

Defaultně se šipky slideru umístí do samotného elementu (slideru), který obsahuje slidy. Pokud chceme změnit kde se šipky zobrazí, můžeme k tomu použít nastavení appendArrows.

$('.muj-slider').slick({
    appendArrows: '.gallery' // šipky se umístí do elementu s třídou gallery
});

Určení elementu, který představuje šipku

Pokud chceme, tak nemusíme nechat slick vytvořit pro slider šipky. Pokud chceme můžeme si je vytvořit sami a potom jen nastavit, že je má Slick použít jako šipky. Pro nastavení elementu jako šipku zpět použijeme nastavení prevArrow. Pro nastavení elementu jako šipku dopředu použijeme nastavení nextArrow.

$('.muj-slider').slick({
    prevArrow: '#sipka-zpet', // šipkou zpět bude element s id sipka-zpet
    nextArrow: '#sipka-dopredu' // šipkou dopředu bude element s id sipka-dopredu
});

Stylování šipek

Pokud jsme si spolu se Slickem do našeho projektu nepřidali i jeho styly, tak se nám šipky slideru nezobrazí vůbec pěkně. Vlastně to ani nejsou šipky, ale tlačítka. Tato tlačítka ale můžeme nastylovat a udělat z nich svoje vlastní šipky. Existuje více cest, jak to udělat a záleží na tom kde se šipky zobrazili, nebo jaký element jsme nastavili jako šipku. Pokud jsme jako šipku nastavili nějaký svůj vlastní element, tak je stylování samozřejmě jednoduché. Pokud jsme ale nechali Slick ať vytvoří šipky sám, tak musíme zjistit co máme vlastně stylovat pomocí vývojářský nástrojů. Následující ukázka ukazuje, jak bychom mohli například takovou šipku nastylovat. Pro vytvoření tvaru šipky jsou zde použity pseudo elementy before a after.

#sipka-dopredu {
    width: 5rem;
    height: 5rem;
    
    background-color: #44c0c2;
    border-radius: .4rem;
    cursor: pointer;

    position: relative;
}

/* stylování dolní i horní části šipky */
#sipka-dopredu::before, #sipka-dopredu::after {
    content: ""; /* zobrazení pseudo elementu */

    width: 50%;
    height: .4rem;

    background-color: #fff;
    border-radius: .2rem;

    position: absolute;
    right: 1.2rem;
    transform-origin: right;

    transition: all .2s;
}

#sipka-dopredu::before { /* dolní část šipky */
    top: 50%;
    transform: translateY(-.3rem) rotate(-45deg);
}
#sipka-dopredu::after { /* horní část šipky */
    bottom: 50%;
    transform: translateY(.3rem) rotate(45deg);
}

/* při najetí myši na šipku */
#sipka-dopredu:hover::before {
    transform: translateY(-.3rem) rotate(-38deg);
}
#sipka-dopredu:hover::after {
    transform: translateY(.3rem) rotate(38deg);
}

Zobrazení/Skrytí navigace

U slideru si můžeme nechat zobrazit také navigaci, pomocí které se bude uživatel moci přepínat na konkrétní slide, který si vybere. Zobrazíme ji nastavením vlastnosti dots na hodnotu true.

$('.muj-slider').slick({
    dots: true // zobrazení navigace
});

Změnění elementu do kterého se umístí navigace

Stejně jako u šipek, i u navigace si můžeme určit do kterého elementu se navigace slideru umístí. Použijeme k tomu nastavení appendDots.

$('.muj-slider').slick({
    appendDots: '.gallery' // navigace se umístí do elementu s třídou gallery
});

Změnění jména třídy pro navigaci slideru

Slick defaultně navigaci slideru nastavuje jako třídu "slider-dots". Pokud bychom chtěli navigaci nastavit jinou třídu, tak k tomu použijeme nastavení dotsClass. Hodí se to když na stránce máme třeba více sliderů, ale u každého slideru chceme navigaci nastylovat trochu jinak.

$('.muj-slider').slick({
    dotsClass: 'moje-navigace' // navigaci se přiřadí třída moje-navigace
});

Stylování navigace

Pokud jsme si do našeho projektu nepřidali společně se Slickem i jeho styly, tak se nám navigace stejně jako šipky nezobrazí vůbec pěkně. Takže ji budeme muset nastylovat. Musíme ale vědět co přesně máme stylovat, takže musíme použít vývojářské nástroje a podívat se z čeho se navigace slideru skládá. Jedná se o neuspořádaný seznam s tlačítky. Následující ukázka ukazuje, jak bychom mohli navigaci například nastylovat.

.moje-navigace li {
    display: inline-block;
    margin-right: 1rem;
}

.moje-navigace button {
    font-size: 0; /* nezobrazíme čísla tlačítek */

    width: 2rem;
    height: 2rem;

    border: none;
    border-radius: 50%;
    background-color: #e9e9e9;

    transition: all .2s;

    cursor: pointer;

}
.moje-navigace button:hover {
    background-color: #44c0c2;
}

• 1
• 2
• 3
• 4
• 5