From 2a8cbf690cfc117dd76a07fb74742a8691e28a89 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 4 Mar 2017 15:28:42 +0800
Subject: Add Carousels exp component

---
 docs/experimentals.html | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

(limited to 'docs/experimentals.html')

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 638d195..5395b02 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -53,12 +53,18 @@
               <li class="nav-item">
                 <a href="elements.html#labels">Labels</a>
               </li>
+              <li class="nav-item">
+                <a href="elements.html#codes">Codes</a>
+              </li>
               <li class="nav-item">
                 <a href="elements.html#media">Media</a>
               </li>
               <li class="nav-item active">
                 <a href="experimentals.html">Experimentals</a>
                 <ul class="nav">
+                  <li class="nav-item">
+                    <a href="experimentals.html#carousels">Carousels</a>
+                  </li>
                   <li class="nav-item">
                     <a href="experimentals.html#meters">Meters</a>
                   </li>
@@ -96,6 +102,44 @@
           </section>
         </section>
 
+        <section id="carousels" class="container">
+          <header class="text-center"><h3>Carousels</h3></header>
+          <section class="notes">
+            <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS and not perfect.</p>
+          </section>
+          <div class="columns text-center">
+            <div class="column col-12">
+              <div class="carousel">
+                <input type="radio" id="slide-1" name="carousel-radio" class="carousel-locator" checked>
+              	<input type="radio" id="slide-2" name="carousel-radio" class="carousel-locator">
+                <input type="radio" id="slide-3" name="carousel-radio" class="carousel-locator">
+              	<input type="radio" id="slide-4" name="carousel-radio" class="carousel-locator">
+                <div class="carousel-container">
+                  <figure class="carousel-item">
+                    <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                  </figure>
+                  <figure class="carousel-item">
+                    <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                  </figure>
+                  <figure class="carousel-item">
+                    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                  </figure>
+                  <figure class="carousel-item">
+                    <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                  </figure>
+                </div>
+                <div class="carousel-nav">
+                  <label class="nav-item text-hide hand" for="slide-1">1</label>
+                  <label class="nav-item text-hide hand" for="slide-2">2</label>
+                  <label class="nav-item text-hide hand" for="slide-3">3</label>
+                  <label class="nav-item text-hide hand" for="slide-4">4</label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </section>
+
         <section id="meters" class="container">
           <header class="text-center"><h3>Meters</h3></header>
           <section class="notes">
-- 
cgit v1.3.1-23-gd82d