Carousel simplest example

kitchen-sink/app/asides/features.html

@@ -90,7 +90,7 @@
                 </a>
             </li>
 
-            <!-- Notifications -->
+            <!-- Pull & Refresh -->
             <li>
                 <a href="#pull" data-router="section">
                     <strong>Pull & Refresh</strong>
@@ -98,6 +98,14 @@
                 </a>
             </li>
 
+            <!-- Carousel -->
+            <li>
+                <a href="#carousel" data-router="section">
+                    <strong>Carousel</strong>
+                    <small>Carousel images example</small>
+                </a>
+            </li>
+
             <!-- Colours -->
             <li>
                 <a href="#color" data-router="section" data-title="Colours">

kitchen-sink/app/events.carousel.js

@@ -0,0 +1 @@
+Lungo.Element.Carousel($$('[data-control=carousel]')[0]);

kitchen-sink/app/sections/carousel.html

@@ -0,0 +1,51 @@
+<section id="carousel" data-transition="slide">
+    <header data-title="Carousel">
+        <nav class="box">
+            <a href="#back" data-router="section" data-label="back"></a>
+        </nav>
+    </header>
+    <article id="carousel-article" class="indented">
+        <div data-control="carousel" class="carousel">
+            <div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/food/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/sports/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/people/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/abstract/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/city/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/transport/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/nature/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/fashion/">
+                    <p>Example of carousel</p>
+                </div>
+                <div align="center">
+                    <img src="http://lorempixel.com/256/128/technics/">
+                    <p>Example of carousel</p>
+                </div>
+            </div>
+        </div>
+
+    </article>
+
+</section>

kitchen-sink/index.html

@@ -154,6 +154,7 @@
                         'app/sections/scroll.html',
                         'app/sections/color.html',
                         'app/sections/pull.html',
+                        'app/sections/carousel.html',
                         'app/asides/features.html',
                         'app/asides/left.html',
                         'app/asides/right.html']
@@ -168,6 +169,7 @@
         <script src="app/events.notification.js"></script>
         <script src="app/events.touch.js"></script>
         <script src="app/events.pull.js"></script>
+        <script src="app/events.carousel.js"></script>
 
 </body>
 </html>