metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Need to show slides? There's nothing easier, use the carousel component. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Carousel - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .bullet-big { width: 1rem!important; height: 1rem!important; } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Carousel</a></li> <li class="toc-entry"><a href="#_carousel_about">About</a></li> <li class="toc-entry"><a href="#_carousel_size">Carousel size</a></li> <li class="toc-entry"> <a href="#_carousel_controls">Controls</a> <ul> <li class="toc-entry"><a href="#_carousel_controls_mouse">Show when mouse</a></li> <li class="toc-entry"><a href="#_carousel_controls_hide">Hide controls</a></li> <li class="toc-entry"><a href="#_carousel_controls_symbols">Left and right</a></li> <li class="toc-entry"><a href="#_carousel_controls_bullets">Bullets</a></li> </ul> </li> <li class="toc-entry"><a href="#_carousel_slides">Slides</a></li> <li class="toc-entry"> <a href="#_carousel_effects">Effects</a> <ul> <li class="toc-entry"><a href="#_carousel_effects_duration">Duration & period</a></li> <li class="toc-entry"><a href="#_carousel_effects_duration_slide">Slide timings</a></li> <li class="toc-entry"><a href="#_carousel_effects_func">Easing function</a></li> </ul> </li> <li class="toc-entry"><a href="#_carousel_options">Options</a></li> <li class="toc-entry"><a href="#_carousel_events">Events</a></li> <li class="toc-entry"><a href="#_carousel_methods">Methods</a></li> <li class="toc-entry"><a href="#_carousel_customize">Customize</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Carousel</h1> <p class="text-leader"> Need to show slides? There's nothing easier, use the carousel component. </p>  <h3 id="_carousel_about">About</h3> <p> In Metro 4 the process of the creating <code>carousel</code> it very easy. To create <code>carousel</code> you mus add attribute <code>data-role="carousel"</code> to element and define <code>slides</code>. Also you can set any options with additional attributes. </p> <div class="example"> <div data-role="carousel" data-auto-start="true" data-cls-controls="fg-white" data-cls-bullet="bullet-big" data-bullets-position="right" data-control-next="<span class='mif-chevron-right fg-cyan'></span>" data-control-prev="<span class='mif-chevron-left fg-cyan'></span>" > <div class="slide"> <div class="p-2 pl-10 pr-10 h-100"> <div class="row flex-align-center h-100"> <div class="cell-md-4 text-center"> <img src="images/pumba.png" class="img-fluid"> </div> <div class="cell-md-8"> <h1 class="text-light">Pumba</h1> <p class="mt-4 mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p> <button class="button alert">Show more...</button> </div> </div> </div> </div> <div class="slide" data-cover="images/pumba-bg.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"> <div class=" p-2 pl-10 pr-10 h-100"> <div class="row flex-align-center h-100"> <div class="cell-md-8"> <p class="indent-letter">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p> </div> <div class="cell-md-4 text-center"> <div class="img-container drop-shadow"> <img src="images/timon_pumba.jpg"> </div> </div> </div> </div> </div> </div> </div> <pre><code> <div data-role="carousel" data-cls-bullet="bullet-big" data-auto-start="true" data-cls-controls="fg-white" data-bullets-position="right" data-control-next="<span class='mif-chevron-right fg-cyan'></span>" data-control-prev="<span class='mif-chevron-left fg-cyan'></span>" > <div class="slide p-2 pl-10 pr-10"> <div class="row flex-align-center h-100"> <div class="cell-md-4 text-center"> <img src="images/pumba.png" class="img-fluid"> </div> <div class="cell-md-8"> <h1 class="text-light">Pumba</h1> <p class="mt-4 mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting...</p> <button class="button alert">Show more...</button> </div> </div> </div> <div class="slide" data-cover="images/pumba-bg.jpg"></div> <div class="slide p-2 pl-10 pr-10" data-cover="images/bg-4.jpg"> <div class="row flex-align-center h-100"> <div class="cell-md-8"> <p class="indent-letter">Lorem Ipsum is simply dummy text of the printing and typesetting...</p> </div> <div class="cell-md-4 text-center"> <div class="img-container drop-shadow"> <img src="images/timon_pumba.jpg"> </div> </div> </div> </div> </div> </code></pre> <h3 id="_carousel_size">Carousel size</h3> <p> You can set <code>carousel size</code> with attributes <code>data-width</code> (default: 100%) and <code>data-height</code> (default: 16/9). For <code>data-width</code> you can set <code>% value</code> or <code>px value</code>. For height you can set: <code>16/9</code> (default), <code>21/9</code>, <code>4/3</code> or <code>px value</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <div data-role="carousel" data-height="16/9" data-controls="false" data-bullets="false" class="border bd-gray border-4"> <div class="slide d-flex flex-justify-center flex-align-center"> <span class="h3">16/9</span> </div> </div> </div> <div class="cell-md-6"> <div data-role="carousel" data-height="21/9" data-controls="false" data-bullets="false" class="border bd-gray border-4"> <div class="slide d-flex flex-justify-center flex-align-center"> <span class="h3">21/9</span> </div> </div> </div> </div> <div class="row mt-2"> <div class="cell-md-6"> <div data-role="carousel" data-height="4/3" data-controls="false" data-bullets="false" class="border bd-gray border-4"> <div class="slide d-flex flex-justify-center flex-align-center"> <span class="h3">4/3</span> </div> </div> </div> <div class="cell-md-6"> <div data-role="carousel" data-height="200" data-controls="false" data-bullets="false" class="border bd-gray border-4"> <div class="slide d-flex flex-justify-center flex-align-center"> <span class="h3">Height 200px</span> </div> </div> </div> </div> </div> <p> Also you can set <code>media</code> values for carousel height. Value can be in format: <strong>@ (media_query), value | (media_query), value | ...</strong>. </p> <pre><code class="html"> <div data-role="carousel" data-height="@ (max-width: 992px),500 | (max-width: 768px),350 | (max-width: 576px),100"> <div class="slide d-flex flex-justify-center flex-align-center"> <span class="h3">Slide</span> </div> </div> <div data-role="carousel" data-height="@ (max-width: 992px),21/9 | (max-width: 768px),16/9 | (max-width: 576px),4/3"> <div class="slide d-flex flex-justify-center flex-align-center"> <span class="h3">Slide</span> </div> </div> </code></pre> <h3 id="_carousel_controls">Controls</h3> <p> For sliding the slides user can use carousel <code>controls</code>, such as <code>left</code>, <code>right</code> and <code>bullets</code>. By default controls placed are inside the carousel slides area. To put <code>controls</code> outside the carousel set attribute <code>data-controls-outside="true"</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <h5 class="text-center">Inside</h5> <div data-role="carousel" data-cls-controls="fg-white"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> <div class="cell-md-6"> <h5 class="text-center">Outside</h5> <div data-role="carousel" data-controls-outside="true"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> </div> </div> <pre><code> <div data-role="carousel"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> <div data-role="carousel" data-controls-outside="true"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </code></pre> <h4 id="_carousel_controls_mouse">Show controls when mouse enter</h4> <p> With attribute <code>data-controls-on-mouse="true"</code> you can set visible controls only if mouse enter to carousel. </p> <div class="example"> <div data-role="carousel" data-controls-on-mouse="true" data-cls-controls="fg-white"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-controls-on-mouse="true" data-cls-controls="fg-white"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </code></pre> <h4 id="_carousel_controls_hide">Hide controls</h4> <p> You can hide controls with attributes <code>data-controls="false"</code> and <code>data-bullets="false"</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <h5 class="text-center">No left, right</h5> <div data-role="carousel" data-controls="false"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> <div class="cell-md-6"> <h5 class="text-center">No bullets</h5> <div data-role="carousel" data-bullets="false" data-cls-controls="fg-white"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-controls="false"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> <div data-role="carousel" data-bullets="false"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </code></pre> <h4 id="_carousel_controls_symbols">Left and right symbols</h4> <p> You can change <code>left</code> and <code>right</code> slides switchers symbols with attributes <code>data-control-next</code> and <code>data-control-prev</code>. </p> <div class="example"> <div data-role="carousel" data-cls-controls="fg-white" data-control-next="<span class='mif-chevron-right'></span>" data-control-prev="<span class='mif-chevron-left'></span>"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-cls-controls="fg-white" data-control-next="<span class='mif-chevron-right'></span>" data-control-prev="<span class='mif-chevron-left'></span>"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </code></pre> <h4 id="_carousel_controls_bullets">Bullets</h4> <p> You can use one of three predefined variants of <code>bullets</code>. To set bullet type use attribute <code>data-bullets-style</code> with values: <code>circle</code>, <code>square</code> (default), <code>rect</code> or <code>diamond</code>. To set bullet size use attribute <code>data-bullets-size</code> with values: <code>mini</code>, <code>small</code>, <code>default</code> or <code>large</code>. Also you can set bullets position via attribute <code>data-bullets-position</code>. You can set bullet on the <code>left</code>, <code>right</code> or <code>center</code>. The default value for <code>data-bullets-position</code> is a <code>center</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <div data-role="carousel" data-bullets-style="circle" data-controls="false"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> <div class="cell-md-6"> <div data-role="carousel" data-bullet-style="square" data-controls="false"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> </div> <div class="row mt-2"> <div class="cell-md-6"> <div data-role="carousel" data-bullets-style="rect" data-controls="false" data-bullets-position="left"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> <div class="cell-md-6"> <div data-role="carousel" data-bullets-style="diamond" data-controls="false" data-bullets-position="right"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-bullet-style="circle"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> <div data-role="carousel" data-bullet-style="square"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> <div data-role="carousel" data-bullet-style="rect" data-bullets-position="left"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> <div data-role="carousel" data-bullet-style="diamond" data-bullets-position="right"> <div class="slide" data-cover="images/1.jpg"></div> <div class="slide" data-cover="images/2.jpg"></div> <div class="slide" data-cover="images/3.jpg"></div> </div> </code></pre> <h3 id="_carousel_slides">Slides</h3> <p> The slide is a block element with class <code>.slide</code>. For each slide you can set background image. To set background image for slide, add attribute <code>data-cover="..."</code> to slide. </p> <p class="remark alert"> By default, <code>slide</code> not have <code>margin</code> or <code>padding</code>. You must set it manually if need. </p> <div class="example"> <div data-role="carousel" data-cls-controls="fg-cyan"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-cls-controls="fg-cyan"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </code></pre>  <h3 id="_carousel_effects">Effects</h3> <p> Slide change is accompanied by various effects. Currently supports four effects: <code>slide</code>, <code>slide-v</code>, <code>switch</code> and <code>fade</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <h5>switch</h5> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="switch" data-controls="false" data-bullets="false" data-auto-start="true"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> <div class="cell-md-6"> <h5>fade</h5> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="fade" data-controls="false" data-bullets="false" data-auto-start="true"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> </div> <div class="row mt-2"> <div class="cell-md-6"> <h5>slide</h5> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-controls="false" data-bullets="false" data-auto-start="true"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> <div class="cell-md-6"> <h5>slide-v</h5> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide-v" data-controls="false" data-bullets="false" data-auto-start="true"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-effect="slide"> ... </div> <div data-role="carousel" data-effect="switch"> ... </div> <div data-role="carousel" data-effect="fade"> ... </div> </code></pre> <h4 id="_carousel_effects_duration">Duration and period</h4> <p> The speed of applying the effect is determined by the duration parameter, which can be set via the attribute <code>data-duration</code>. The default value for <code>duration</code> is <code>1s</code>. The interval between slides is determined by the period parameter and can be specified via the attribute <code>data-period</code>. The default value for <code>data-period</code> is <code>5s</code>. </p> <div class="example"> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-controls="false" data-bullets="false" data-auto-start="true" data-period="3000" data-duration="500"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-period="3000" data-duration="500"> ... </div> </code></pre> <h4 id="_carousel_effects_duration_slide">Slide timings</h4> <p> Also, you can set <code>duration</code> and <code>period</code> option individual for each slide in carousel. </p> <div class="example"> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-controls="false" data-bullets="false" data-auto-start="true"> <div class="slide fg-white d-flex flex-align-center flex-justify-center" data-cover="images/bg-1.jpg" data-period="3000">This slide showing 3sec</div> <div class="slide d-flex flex-align-center flex-justify-center" data-cover="images/bg-2.jpg" data-period="5000">This slide showing 5sec</div> <div class="slide d-flex flex-align-center flex-justify-center" data-cover="images/bg-3.jpg" data-period="1000">This slide showing 1sec</div> <div class="slide d-flex flex-align-center flex-justify-center" data-cover="images/bg-4.jpg" data-period="10000">This slide showing 10sec</div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-controls="false" data-bullets="false" data-auto-start="true"> <div class="slide" data-cover="images/bg-1.jpg" data-period="3000">This slide showing 3sec</div> <div class="slide" data-cover="images/bg-2.jpg" data-period="5000">This slide showing 5sec</div> <div class="slide" data-cover="images/bg-3.jpg" data-period="1000">This slide showing 1sec</div> <div class="slide" data-cover="images/bg-4.jpg" data-period="10000">This slide showing 10sec</div> </div> </code></pre> <h4 id="_carousel_effects_func">Easing function</h4> <p> For effect <code>slide</code> you can use additional parameter: <code>effectFunc</code>, which can be set via the <code>data-effect-func="..."</code> attribute. Value for this parameter you can found on <a href="easing.html">this page</a> </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-effect-func="easeOutBounce" data-controls="false" data-bullets="false" data-auto-start="true" data-period="3000" data-duration="1000"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> <div class="cell-md-6"> <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-effect-func="easeInQuart" data-controls="false" data-bullets="false" data-auto-start="true" data-period="3000" data-duration="1000"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> </div> </div> </div> <pre><code class="html"> <div data-role="carousel" data-effect="slide" data-effect-func="easeOutBounce"> ... </div> <div data-role="carousel" data-effect="slide" data-effect-func="easeInQuart"> ... </div> </code></pre> <h3 id="_carousel_options">Options</h3> <p> The <code>carousel</code> component has a number of options. You can use that options to set style and behavior of component. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>autoStart</td> <td><code>data-auto-start</code></td> <td>false</td> <td>If true, carousel started automatically</td> </tr> <tr> <td>width</td> <td><code>data-width</code></td> <td>100%</td> <td>The width of carousel, can be percent or int value</td> </tr> <tr> <td>height</td> <td><code>data-height</code></td> <td>16/9</td> <td>The height of carousel, can be: 16/9, 21/9, 4/3 or pixel value</td> </tr> <tr> <td>effect</td> <td><code>data-effect</code></td> <td>slide</td> <td>The effect for carousel, can be slide, slide-v, switch or fade</td> </tr> <tr> <td>effectFunc</td> <td><code>data-effect-func</code></td> <td>linear</td> <td>The easing function for effect for carousel</td> </tr> <tr> <td>direction</td> <td><code>data-direction</code></td> <td>left</td> <td>The direction for sliding for carousel. Can be left or right</td> </tr> <tr> <td>duration</td> <td><code>data-duration</code></td> <td>1000</td> <td>The duration sliding own slide. Value in milliseconds</td> </tr> <tr> <td>period</td> <td><code>data-period</code></td> <td>5000</td> <td>The period sliding own slide. Value in milliseconds</td> </tr> <tr> <td>stopOnMouse</td> <td><code>data-stop-on-mouse</code></td> <td>true</td> <td>If true and autoStart is true carousel stopped when mouse is entered</td> </tr> <tr> <td>controls</td> <td><code>data-controls</code></td> <td>true</td> <td>Show or hide left, right controls</td> </tr> <tr> <td>bullets</td> <td><code>data-bullets</code></td> <td>true</td> <td>Show or hide bullets</td> </tr> <tr> <td>bulletsStyle</td> <td><code>data-bullets-style</code></td> <td>square</td> <td>Set bullets style. Can be square, circle, rect or diamond</td> </tr> <tr> <td>bulletsSize</td> <td><code>data-bullets-size</code></td> <td>default</td> <td>Set bullets size. Can be default, mini, small, large</td> </tr> <tr> <td>controlsOnMouse</td> <td><code>data-controls-on-mouse</code></td> <td>false</td> <td>if true controls and bullets can visible on mouse over</td> </tr> <tr> <td>controlsOutside</td> <td><code>data-controls-outside</code></td> <td>false</td> <td>Put controls and bullets to outside the slides area</td> </tr> <tr> <td>bulletsPosition</td> <td><code>data-bullets-position</code></td> <td>center</td> <td>Bullets position. Can be center, left or right</td> </tr> </tbody> </table> <p> You can set a number of option for each slide: <code>period</code>, <code>duration</code>, <code>cover</code>. </p> <h3 id="_carousel_events">Events</h3> <p> When carousel works, it generated the numbers of events. You can use callback for this events to behavior with component. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onStop(el)</td> <td><code>data-on-stop</code></td> <td>Fired when carousel stopped</td> </tr> <tr> <td>onStart(el)</td> <td><code>data-on-start</code></td> <td>Fired when carousel started</td> </tr> <tr> <td>onPlay(el)</td> <td><code>data-on-play</code></td> <td>Fired when carousel started when play method</td> </tr> <tr> <td>onSlideClick(slide, el, event)</td> <td><code>data-on-slide-click</code></td> <td>Fired when user click on slide</td> </tr> <tr> <td>onBulletClick(bullet, el, event)</td> <td><code>data-on-bullet-click</code></td> <td>Fired when user click on bullet</td> </tr> <tr> <td>onMouseEnter(element, event)</td> <td><code>data-on-mouse-enter</code></td> <td>Fired when mouse entered on component</td> </tr> <tr> <td>onMouseLeave(element, event)</td> <td><code>data-on-mouse-leave</code></td> <td>Fired when mouse leave the component</td> </tr> <tr> <td>onNextClick(el, event)</td> <td><code>data-on-next-click</code></td> <td>Fired click next (to right) switch</td> </tr> <tr> <td>onPrevClick(el, event)</td> <td><code>data-on-next-click</code></td> <td>Fired click prev (to left) switch</td> </tr> <tr> <td>onSlideShow(slide)</td> <td><code>data-on-slide-show</code></td> <td>Fired when slide show</td> </tr> <tr> <td>onSlideHide(slide)</td> <td><code>data-on-slide-hide</code></td> <td>Fired when slide hide</td> </tr> <tr> <td>onCarouselCreate(el)</td> <td><code>data-on-carousel-create</code></td> <td>Fired when carousel is created</td> </tr> </tbody> </table> <h3 id="_carousel_methods">Methods</h3> <p> Component carousel has a number of methods to manipulate component. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Method</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>toSlide(index)</code></td> <td>Go to specific slide</td> </tr> <tr> <td><code>next()</code></td> <td>Go to next slide</td> </tr> <tr> <td><code>prev()</code></td> <td>Go to prev slide</td> </tr> <tr> <td><code>stop()</code></td> <td>Stop the carousel</td> </tr> <tr> <td><code>play()</code></td> <td>Play the carousel</td> </tr> </tbody> </table> <div class="example"> <div data-role="carousel" id="carousel_methods" data-period="3000" data-duration="1000"> <div class="slide" data-cover="images/bg-1.jpg"></div> <div class="slide" data-cover="images/bg-2.jpg"></div> <div class="slide" data-cover="images/bg-3.jpg"></div> <div class="slide" data-cover="images/bg-4.jpg"></div> </div> <div class="mt-2 text-center"> <button class="button" onclick="$('#carousel_methods').data('carousel').play()">Play</button> <button class="button" onclick="$('#carousel_methods').data('carousel').stop()">Stop</button