Carouselcomponent

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

Basic carousel HTML

Metro UI CSS provides carousel component. You must use next html definition to create carousel:

<div class="carousel">
    <div class="slide">
        ...
    </div>

    <div class="slide">
        ...
    </div>

    <a class="controls left"><i class="icon-arrow-left-3"></i></a>
    <a class="controls right"><i class="icon-arrow-right-3"></i></a>
</div>

Usage

To activate carousel with data-api you can add attribute data-role="carousel" to component.

<div class="carousel" data-role="carousel">...</div>

Call carousel manually with:

$('.carousel').carousel();
--------------------------
$('.carousel').carousel({
    auto: false,
    period: 3000,
    duration: 2000,
    markers: {
        type: "square"
    }
});

Options

Carousel options

Name	data-attr	Type	Default	Description
auto	data-auto	boolean	true	Auto start sliding.
period	data-period	number	2000
duration	data-duration	number	500
effect	data-effect	string	"slowdown"	"slide", "fade", "switch", "slowdown"
direction	data-direction	string	"left"	"left", "right"
markers	data-markers-*	object	{...}
stop	data-stop	boolean	true	Stop sliding on mouse over
controls	data-controls	boolean	true	Activating carousel left/right controls
width	data-width	string or number	"100%"
height	data-height	string or number	300

Markers options

Name	data-attr	Type	Default	Description
show	data-markers-show	boolean	true	Show or Hide markers
type	data-markers-type	string	"default"	"default", "cycle", "square"
position	data-markers-position	string	"bottom-left"	"bottom-left", "bottom-right", "bottom-center", "top-left", "top-right", "top-center"