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

Markers options

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