p Carousels are slideshows for cycling images. It is built in pure CSS.

.docs-demo.columns
  .column.col-12
    .carousel
      input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
      input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="")
      input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="")
      input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="")
      .carousel-container
        figure.carousel-item
          label.item-prev.btn.btn-action.btn-lg(for="slide-4")
            i.icon.icon-arrow-left
          label.item-next.btn.btn-action.btn-lg(for="slide-2")
            i.icon.icon-arrow-right
          img.img-responsive.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper")
        figure.carousel-item
          label.item-prev.btn.btn-action.btn-lg(for="slide-1")
            i.icon.icon-arrow-left
          label.item-next.btn.btn-action.btn-lg(for="slide-3")
            i.icon.icon-arrow-right
          img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
        figure.carousel-item
          label.item-prev.btn.btn-action.btn-lg(for="slide-2")
            i.icon.icon-arrow-left
          label.item-next.btn.btn-action.btn-lg(for="slide-4")
            i.icon.icon-arrow-right
          img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper")
        figure.carousel-item
          label.item-prev.btn.btn-action.btn-lg(for="slide-3")
            i.icon.icon-arrow-left
          label.item-next.btn.btn-action.btn-lg(for="slide-1")
            i.icon.icon-arrow-right
          img.img-responsive.rounded(src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper")
      .carousel-nav
        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

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        <!-- 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>