02.09 Boxy - Carousely
Zdrojové CSS: /src/css/molecules/box/_slider.scss
Zdrojové JS: /src/js/components/cycle.coffee
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.
<div class="grid grid--center">
<div class="grid__cell size--l--8-12">
<div class="box-slider js-slider" data-timeout="1000">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" data-title="Nadpis druhého slidu" data-desc="Lorem ipsum dolor sit amet..." style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="http://placehold.it/768x576" width="768" height="576" alt="">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" data-title="Nadpis třetího slidu" data-desc="Ipsum ipsum ipsum" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
<div class="box-slider__overlay"></div>
<div class="box-slider__pager"><a href="#">1</a><a href="#">2</a><a href="#">3</a></div>
</div>
</div>
</div>Přidání modifikátoru box-slider--small na box-slider se zobrazí popisek a stránkování až pod obrázek.
<div class="grid grid--center">
<div class="grid__cell size--l--4-12">
<div class="box-slider box-slider--small js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#1" class="box-slider__item cycle-slide cycle-sentinel" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#1" class="box-slider__item cycle-slide cycle-slide-active" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><div class="box-slider__item cycle-slide" data-title="Nadpis druhého slidu" data-desc="Lorem ipsum dolor sit amet..." style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</div><a href="#2" class="box-slider__item cycle-slide" data-title="Nadpis třetího slidu" data-desc="Ipsum ipsum ipsum" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
<div class="box-slider__overlay"></div>
<div class="box-slider__pager"><a href="#">1</a><a href="#">2</a><a href="#">3</a></div>
</div>
</div>
</div>Přidání modifikátoru box-slider--small na box-slider se zobrazí popisek a stránkování až pod obrázek.
<div class="grid">
<div class="grid__cell size--l--8-12">
<div class="box-slider js-slider" data-timeout="1000">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" data-title="Nadpis druhého slidu" data-desc="Lorem ipsum dolor sit amet..." style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="http://placehold.it/768x576" width="768" height="576" alt="">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" data-title="Nadpis třetího slidu" data-desc="Ipsum ipsum ipsum" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
<div class="box-slider__overlay"></div>
<div class="box-slider__pager"><a href="#">1</a><a href="#">2</a><a href="#">3</a></div>
</div>
</div>
<div class="grid__cell size--l--4-12">
<div class="box-slider box-slider--small js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" data-title="Nadpis slidu" data-desc="Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ..." style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" data-title="Nadpis druhého slidu" data-desc="Lorem ipsum dolor sit amet..." style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" data-title="Nadpis třetího slidu" data-desc="Ipsum ipsum ipsum" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
<div class="box-slider__overlay"></div>
<div class="box-slider__pager"><a href="#">1</a><a href="#">2</a><a href="#">3</a></div>
</div>
</div>
</div><div class="grid grid--center">
<div class="grid__cell size--l--6-12">
<div class="box-slider box-slider--video js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item box-slider__item--video cycle-slide cycle-sentinel" data-title="Nadpis video slidu" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
<span class="image__play" style="visibility: hidden;">
<span class="icon icon-play" style="visibility: hidden;"></span>
Přehrát
</span>
</div>
</a>
<a href="#" class="box-slider__item box-slider__item--video cycle-slide cycle-slide-active" data-title="Nadpis video slidu" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
<span class="image__play">
<span class="icon icon-play"></span>
Přehrát
</span>
</div>
</a><a href="#" class="box-slider__item box-slider__item--video cycle-slide" data-title="Nadpis druhého video slidu" style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
<span class="image__play">
<span class="icon icon-play"></span>
Přehrát
</span>
</div>
</a><a href="#" class="box-slider__item box-slider__item--video cycle-slide" data-title="Nadpis třetího video slidu" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
<span class="image__play">
<span class="icon icon-play"></span>
Přehrát
</span>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
<div class="box-slider__overlay"></div>
<div class="box-slider__pager"><a href="#">1</a><a href="#">2</a><a href="#">3</a></div>
</div>
</div>
</div>Výchozí komponenta jen je uvnitř použitý atom s videem.
Ukázka kobinace dvou Carouselů. Je to speciální Carousel pro detail produktu, u kterého je potřeba dodržet strukturu HTML.
<div class="box-slider-pager js-slider-pager">
<div class="box-slider js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 94; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 93; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 92; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
</div>
<div class="box-slider box-slider--carousel js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative; overflow: hidden; width: 3792px;"><a href="#" class="box-slider__item is-active cycle-slide cycle-sentinel" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a><div class="cycle-carousel-wrap" style="margin: 0px; padding: 0px; top: 0px; left: -10112px; position: absolute; white-space: nowrap;"><a href="#" class="box-slider__item is-active cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: inline-block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 99; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 97; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 96; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 95; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 94; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 93; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 92; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item is-active cycle-slide cycle-slide-active" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: inline-block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 99; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 97; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 96; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 95; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 94; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 93; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 92; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item is-active cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: inline-block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 99; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 97; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 96; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 95; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 94; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 93; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 92; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
</div>
</div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
</div>Ukázka kobinace dvou Carouselů. Je to speciální Carousel pro detail produktu, u kterého je potřeba dodržet strukturu HTML.
<div class="box-slider-pager js-slider-pager">
<div class="box-slider js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
</div>
<div class="box-slider box-slider--carousel js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list">
<a href="#" class="box-slider__item is-active" style="width: 1264px;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item" style="width: 1264px;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item" style="width: 1264px;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a>
</div>
</div>
<a href="#" class="box-slider__prev is-disabled">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next is-disabled">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
</div>Ukázka posuvného carouselu se třemi položkami
<div class="box-slider-pager js-slider-pager">
<div class="box-slider js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: hidden;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
</div>
<div class="box-slider box-slider--carousel js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list">
<a href="#" class="box-slider__item is-active" style="width: 1264px;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item" style="width: 1264px;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a>
</div>
</div>
<a href="#" class="box-slider__prev is-disabled">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next is-disabled">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
</div>
</div>Ukázka posuvného carouselu se dvěmi položkami.
<div class="box-slider-pager js-slider-pager">
<div class="box-slider js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
</a>
<a href="#" class="box-slider__item cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
</a></div>
</div>
</div>
</div>Ukázka posuvného carouselu s jendou položkou.
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.
<div class="box-slider box-slider--carousel js-slider">
<div class="box-slider__wrap">
<div class="box-slider__list" style="position: relative; overflow: hidden; width: 5056px;"><a href="#" class="box-slider__item cycle-slide cycle-sentinel" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<div class="image image--4by3" style="visibility: hidden;">
<div class="image__holder" style="visibility: hidden;">
<div class="image__inner" style="visibility: hidden;">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576" style="visibility: hidden;">
</div>
</div>
</div>
<div class="box-slider__content" style="visibility: hidden;">
<h2 class="box-slider__title" style="visibility: hidden;">Nadpis článku</h2>
<p style="visibility: hidden;">
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><div class="cycle-carousel-wrap" style="margin: 0px; padding: 0px; top: 0px; left: -10112px; position: absolute; white-space: nowrap;"><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: inline-block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item box-slider__item--video cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 99; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
<span class="image__play image__play--small">
<span class="icon icon-play"></span>
</span>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku video</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 97; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 96; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 95; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 94; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 93; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 92; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide cycle-slide-active" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: inline-block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item box-slider__item--video cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 99; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
<span class="image__play image__play--small">
<span class="icon icon-play"></span>
</span>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku video</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 97; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 96; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 95; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 94; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 93; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 92; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: inline-block; visibility: visible;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item box-slider__item--video cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 99; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
<span class="image__play image__play--small">
<span class="icon icon-play"></span>
</span>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku video</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 97; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 96; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 95; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 94; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 93; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a><a href="#" class="box-slider__item cycle-slide" style="width: 1264px; position: static; top: 0px; left: 0px; z-index: 92; display: inline-block;">
<div class="image image--4by3">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/carousel.jpg" alt="" width="768" height="576">
</div>
</div>
</div>
<div class="box-slider__content">
<h2 class="box-slider__title">Nadpis článku</h2>
<p>
Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající
</p>
</div>
</a></div>
</div>
</div>
<a href="#" class="box-slider__prev">
<span class="vhide">Předchozí</span>
<span class="icon icon-angle-left"></span>
</a>
<a href="#" class="box-slider__next">
<span class="vhide">Následující</span>
<span class="icon icon-angle-right"></span>
</a>
<div class="box-slider__pager"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a></div>
</div>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.