From 012f0dc6d171b714d3a036d955546285f00453e4 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 7 Mar 2017 20:57:36 +0800
Subject: Add Carousels previous and next buttons

---
 docs/experimentals.html | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

(limited to 'docs/experimentals.html')

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 0c8dc7c..53fd840 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -213,9 +213,6 @@
                         <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Product launch event</a>
                         <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Lunch</a>
                         <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a>
-                        <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Product launch event</a>
-                        <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Lunch</a>
-                        <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a>
                       </div>
                     </div>
                     <div class="calendar-date current-month"><button class="date-item">9</button></div>
@@ -258,26 +255,53 @@
         <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>
+            <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p>
           </section>
           <div class="columns text-center">
             <div class="column col-12">
-              <div class="carousel">
+              <div class="carousel carousel-autoplay">
                 <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">
+                    <label class="item-prev btn btn-action btn-lg" for="slide-4">
+                      <i class="icon icon-keyboard_arrow_left"></i>
+                    </label>
+                    <label class="item-next btn btn-action btn-lg" for="slide-2">
+                      <i class="icon icon-keyboard_arrow_right"></i>
+                    </label>
                     <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
                   </figure>
+
                   <figure class="carousel-item">
+                    <label class="item-prev btn btn-action btn-lg" for="slide-1">
+                      <i class="icon icon-keyboard_arrow_left"></i>
+                    </label>
+                    <label class="item-next btn btn-action btn-lg" for="slide-3">
+                      <i class="icon icon-keyboard_arrow_right"></i>
+                    </label>
                     <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
                   </figure>
+
                   <figure class="carousel-item">
+                    <label class="item-prev btn btn-action btn-lg" for="slide-2">
+                      <i class="icon icon-keyboard_arrow_left"></i>
+                    </label>
+                    <label class="item-next btn btn-action btn-lg" for="slide-4">
+                      <i class="icon icon-keyboard_arrow_right"></i>
+                    </label>
                     <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
                   </figure>
+                  
                   <figure class="carousel-item">
+                    <label class="item-prev btn btn-action btn-lg" for="slide-3">
+                      <i class="icon icon-keyboard_arrow_left"></i>
+                    </label>
+                    <label class="item-next btn btn-action btn-lg" for="slide-1">
+                      <i class="icon icon-keyboard_arrow_right"></i>
+                    </label>
                     <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
                   </figure>
                 </div>
-- 
cgit v1.3.1-26-gb76a