02.09 Boxy - Carousely

Zdrojové CSS: /src/css/molecules/box/_slider.scss
Zdrojové JS: /src/js/components/cycle.coffee

Základní carousel

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.

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.

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.