diff options
1 files changed, 40 insertions, 1 deletions
| -rw-r--r-- | docs/src/contents/carousels.pug | 41 |
diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug index c9c0045..5d09532 100644 --- a/docs/src/contents/carousels.pug +++ b/docs/src/contents/carousels.pug @@ -36,4 +36,43 @@ p Carousels are slideshows for cycling images. It is built in pure CSS. label.nav-item.text-hide.c-hand(for="slide-1") 1 label.nav-item.text-hide.c-hand(for="slide-2") 2 label.nav-item.text-hide.c-hand(for="slide-3") 3 - label.nav-item.text-hide.c-hand(for="slide-4") 4
\ No newline at end of file + label.nav-item.text-hide.c-hand(for="slide-4") 4 + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="carousel"> + <!-- carousel locator --> + <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked=""> + <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden=""> + <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden=""> + <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden=""> + + <!-- carousel container --> + <div class="carousel-container"> + <!-- carousel item --> + <figure class="carousel-item"> + <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label> + <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" 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-arrow-left"></i></label> + <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" 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-arrow-left"></i></label> + <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" 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-arrow-left"></i></label> + <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper"> + </figure> + </div> + <!-- carousel navigation --> + <div class="carousel-nav"> + <label class="nav-item text-hide c-hand" for="slide-1">1</label> + <label class="nav-item text-hide c-hand" for="slide-2">2</label> + <label class="nav-item text-hide c-hand" for="slide-3">3</label> + <label class="nav-item text-hide c-hand" for="slide-4">4</label> + </div> + </div>
\ No newline at end of file |