diff options
Add Carousels exp component
1 files changed, 44 insertions, 0 deletions
| -rw-r--r-- | docs/experimentals.html | 44 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 638d195..5395b02 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -54,12 +54,18 @@ <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> <li class="nav-item"> @@ -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"> |