diff options
| Commit | c3f9c6fa422a0413672086ed305a2a91e5fb3533 (patch) | |
|---|---|---|
| Author | 2018-06-19 08:49:16 +0800 | |
| Committer | 2018-06-19 08:49:16 +0800 | |
| Files | 8c0471d628a06b937a8f549c6936ebdad68dcf50 /docs/src/contents/carousels.pug | |
| Spectre-Dark-Gruvbox-0.5.3.tar Spectre-Dark-Gruvbox-0.5.3.tar.gz Spectre-Dark-Gruvbox-0.5.3.zip | ||
| Parent | 8eee30d11744ab9b20ca0c8b60087b64c4588ce6 (diff) | |
| Parent | c844709948fa925c837a22e0c13c6c54e0906383 (diff) | |
Merge pull request #456 from picturepan2/0.5.3 v0.5.3
0.5.3
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 |