02.09 Boxy - Carousely
Zdrojové CSS: /src/css/molecules/box/_slider.scss
Zdrojové JS: /src/js/components/carousel.coffee
Základní carousel
Základní carousel – tmavé pozadí
Je potřeba přidat třídu .box-slider--bg, aby na mobilu byly bílé puntíky
S popiskem pod
Přidání modifikátoru box-slider--small na box-slider se zobrazí popisek a stránkování až pod obrázek.
Ukázky použití v různých gridech
Základní carousel video
Výchozí komponenta jen je uvnitř použitý atom s videem.
Posuvný carousel
Ukázka kobinace dvou Carouselů. Je to speciální Carousel pro detail produktu, u kterého je potřeba dodržet strukturu HTML.
Jedna položka
Ukázka posuvného carouselu s jendou položkou.
Carousel pás
Ukázka posuvného carouselu s více položkami na řádku. U tohoto carouselu je nadpis a popisek rovnou v HTML (není tedy generovaný pomocí data atributů).
Do elementu .box-slider__item lze vložit různé komponenty / atomy.
Prostřednictvím atributů "data-count-desktop", "data-count-laptop" a "data-count-mobile" u elementu .box-slider__list lze nastavit počet viditelných obrázků na řádku.
Libovolné komponenty v carouselu
Ukázka s testimonialem. Jde o klasický carousel, ale musíme přidat modifikační classu .box-slider--special, abychom docílili toho, že máme ovládací prvky mimo carousel, aby nepřekrývaly obsah.
Výška carouselu se přizpůsobí nejvyššímu prvku, je tedy vhodné, aby prvky měli ne-li přímo shodnou, pak alespoň velmi podobnou výšku.
Libovolné komponenty v carouselu – tmavé pozadí
V tomto případě je ještě třeba přidat třídu box-slider--bg.
Libovolné komponenty v carouselu
Ukázka s testimonialem. Jde o klasický carousel, ale musíme přidat modifikační classu .box-slider--special, abychom docílili toho, že máme ovládací prvky mimo carousel, aby nepřekrývaly obsah.
Různé ukázky užití carouselu
Ukázka s testimonialem. Jde o klasický carousel, ale musíme přidat modifikační classu .box-slider--special, abychom docílili toho, že máme ovládací prvky mimo carousel.
Výchozí molekula pro carousel. Carousely se překlikávají pomocí JavaScriptu, který se naváže na .box-slider__prev a .box-slider__next – těmto odkazům ponechte href="#". Pro správnou funčnost carouselu je potřeba nastavit na obal class .js-slider. Dále dodržet strukturu vnitřních elementů .box-slider__wrap < .box-slider__list < .box-slider__item. V ukázce jsme carousel obalili do gridu 8/12.
Do .box-slider__item lze vkládat různé molekuly. V našich ukázkách jsme využili atom obrázky.
Přidání nadpisu a popisku obrázku se nastavuje pomocí atributů data-title a date-desc na elementu .box-slider__item.
Jednolivé slajdy mohou být také odkazem. Stačí div.box-slider__item předělat na a[href].box-slider__item.
Délka zobrazení jednotlivých slidů lze nastavit pomocí data-atributu. Délka se zadává v ms.
Šipky se zobrazují na touch zařízeních ihned a na no-touch zařízeních na hover. K tomuto pomáhá detekce z pluginu modernizr.
Pro carousely využíváme námi vybraný a osvědčený plugin SLICK. Dokumentace a ukázky ZDE