02.09 Boxy - Carousely
Zdrojové CSS: /src/css/molecules/box/_slider.scss
Zdrojové JS: /src/js/components/cycle.coffee
Základní carousel
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.
Tři položky
Ukázka posuvného carouselu se třemi položkami
Dvě položky
Ukázka posuvného carouselu se dvěmi položkami.
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.
Výchozí molekula pro carousel. Carousel se překlikávají pomocí JavaScriptu. 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.