Carousel

@@adsense

.carousel

First slide

Carousel :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Without controls

.carousel & .square-markers

HTML


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

Declarative style


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

Javascript style


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

                <script>
                    $(function(){
                        $("#carousel").carousel();
                    });
                </script>

Options

Parameter	Data-*	Type	Default value	Description
auto	data-auto	boolean	true	Auto start carousel after init
period	data-period	int	5000	Sliding period in ms
duration	data-duration	int	1000	Duration in ms
direction	data-direction	string	left	Sliding direction [left, right]
effect	data-effect	string	slide	Sliding effect [slide, fade, switch, slowdown]
effectFunc	data-effect-func	string	linear	Effect function for effect slide
controls	data-controls	boolean	true	Show or hide left(right) controls
controlNext	data-control-next	string	>	Html for control next
controlPrev	data-control-prev	string	<	Html for control prev
markers	data-markers	boolean	true	Show or hide slide markers for quick access to own slide
stop	data-stop	boolean	true	Stop sliding on mouse over
width	data-width	int or string	100%	Carousel width
height	data-height	int or string or false	false	Carousel height, if this eq false carousel height == max slide height

Methods

@@hit