Carouseldemo

‹ ›

Ut egestas tempor magna, sed rutrum felis fermentum quis. Aliquam congue ultricies elit, sit amet tempor tortor tempor nec.

Ut egestas tempor magna, sed rutrum felis fermentum quis. Aliquam congue ultricies elit, sit amet tempor tortor tempor nec.

This super beast eats fresh human flesh. She claws picking his nose, uttering at the same contented purring, and tooth picks out of leftover meat.

‹ ›

‹ ›

Component definition

    <div class="carousel" data-role="carousel">
        <div class="slides">
            <div class="slide image" id="slide1">
                <img />
                <div class="description">
                    Description text here...
                </div>
            </div>

            <div class="slide mixed" id="slide2">
                <img />
                <div class="description">
                    Description text here...
                </div>
            </div>
            ...
        </div>

        <span class="control left">‹</span>
        <span class="control right">›</span>

    </div>

You can manual set the width and height of Carousel.

For use carousel you mus include carousel.js in head of you page and add attribute data-role="carousel" to carousel object. To set specific parameters such as direction, duration, period, etc. you must add param data-param-* to carousel object.

Params:

• auto - auto start carousel sliding (default: true)
• period - slide change period (default: 6000)
• duration - effect duration period (default: 1000)
• effect - animation effect. available: slide, fade, slowdown, switch (default: slide)
• direction - animation direction. available: left, right (default: left)
• markers - on|off slide markers (default: on)
• arrows - on|off slide arrows (default: on)
• stop - on|off slide animation on mouse over (default: on)

    <div class="carousel" data-role="carousel" data-param-auto="false" data-param-effect="fade">
        ...
    </div>

Javascript

Include in head carousel.js