diff options
Add Carousels example code and bump version number
1 files changed, 62 insertions, 4 deletions
| -rw-r--r-- | docs/experimentals.html | 66 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 7cef49c..4f0d944 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -622,10 +622,10 @@ <div class="columns"> <div class="column col-12"> <div class="carousel"> - <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked> - <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator"> - <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator"> - <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator"> + <input type="radio" id="slide-1" class="carousel-locator" name="carousel-radio" hidden checked> + <input type="radio" id="slide-2" class="carousel-locator" name="carousel-radio" hidden> + <input type="radio" id="slide-3" class="carousel-locator" name="carousel-radio" hidden> + <input type="radio" id="slide-4" class="carousel-locator" name="carousel-radio" hidden> <div class="carousel-container"> <figure class="carousel-item"> <label class="item-prev btn btn-action btn-lg" for="slide-4"> @@ -677,6 +677,64 @@ </div> </div> +<!-- comparison sliders --> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"carousel"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-1"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-2"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-3"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-4"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span>> + + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"carousel-container"</span>> + <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-4"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-2"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> + <<span class="tag">/figure</span>> + + <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-1"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-3"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> + <<span class="tag">/figure</span>> + + <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-2"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-4"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> + <<span class="tag">/figure</span>> + + <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-3"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-1"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> + <<span class="tag">/label</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> + <<span class="tag">/figure</span>> + <<span class="tag">/div</span>> + + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"carousel-nav"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-1"</span>>1<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-2"</span>>2<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-3"</span>>3<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-4"</span>>4<<span class="tag">/label</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</code></pre> + </div> <div id="comparison" class="container"> |