---
layout: components
title: Carousel
---

<!-- Hero and nav -->
<div class="hero is-relative is-theme-primary">
  {{> navbar-static-light}}

  <!-- Hero image -->
  <div id="main-hero" class="hero-body">
    <div class="container has-text-centered">
      <div class="columns is-vcentered">
        <div class="column is-4 is-offset-1 has-text-left">
          <h1 class="title components-title is-1">Carousels</h1>
          <h2 class="subtitle is-4 components-subtitle">
            Slick carousel variations.
          </h2>
          <p class="components-cta">
            <a
              href="#basic"
              class="
                button button-cta
                btn-align
                light-btn
                btn-outlined
                is-bold
                rounded
              "
            >
              Get Started
            </a>
          </p>
        </div>
        <div class="column is-offset-1 has-text-centered is-hidden-mobile">
          <div id="carousel-ill" class="vivus-svg"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Image carousel v1 -->
<div id="basic" class="section is-medium">
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">1</div>
      <h2 class="title section-title has-text-centered dark-text text-bold">
        Centered images
      </h2>
    </div>

    <div class="content-wrapper">
      <div class="columns is-vcentered">
        <div class="column">
          <div class="image-carousel">
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/400x300"
                  alt=""
                  data-demo-src="assets/img/demo/flat/big-moon.jpg"
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/400x300"
                  alt=""
                  data-demo-src="assets/img/demo/flat/cactus.png"
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/400x300"
                  alt=""
                  data-demo-src="assets/img/demo/flat/ice-mountains.png"
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/400x300"
                  alt=""
                  data-demo-src="assets/img/demo/flat/moon-mountains.png"
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/400x300"
                  alt=""
                  data-demo-src="assets/img/demo/flat/working.png"
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/400x300"
                  alt=""
                  data-demo-src="assets/img/demo/flat/moon.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Image carousel v2 -->
<div class="section is-medium section-feature-grey">
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">2</div>
      <h2 class="title section-title has-text-centered dark-text text-bold">
        Multiple images
      </h2>
    </div>

    <div class="content-wrapper">
      <div class="columns is-vcentered">
        <div class="column">
          <div class="multiple-image-carousel">
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  class="stack-logo"
                  src="assets/img/logos/stacks/jquery.png"
                  alt=""
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  class="stack-logo"
                  src="assets/img/logos/stacks/angular.png"
                  alt=""
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  class="stack-logo"
                  src="assets/img/logos/stacks/meteor.png"
                  alt=""
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  class="stack-logo"
                  src="assets/img/logos/stacks/vuejs.png"
                  alt=""
                />
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  class="stack-logo"
                  src="assets/img/logos/stacks/rails.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Image carousel v3 -->
<div class="section is-medium">
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">3</div>
      <h2 class="title section-title has-text-centered dark-text text-bold">
        Single image
      </h2>
    </div>

    <div class="content-wrapper">
      <div class="columns is-vcentered">
        <div class="column">
          <div class="single-image-carousel">
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/700x467"
                  alt=""
                  data-demo-src="assets/img/demo/adam_bradley.jpg"
                />
                <div class="caption has-text-left">
                  <span
                    >Lorem ipsum dolor sit amet, vim brute malis vocibus ex, te
                    mei magna persius. Duo nibh aliquam deleniti no.</span
                  >
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/700x467"
                  alt=""
                  data-demo-src="assets/img/demo/evelyne_dwyers.jpg"
                />
                <div class="caption has-text-left">
                  <span
                    >Lorem ipsum dolor sit amet, vim brute malis vocibus ex, te
                    mei magna persius. Duo nibh aliquam deleniti no.</span
                  >
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="image-wrapper">
                <img
                  src="https://via.placeholder.com/700x467"
                  alt=""
                  data-demo-src="assets/img/demo/joel_zimmerman.jpg"
                />
                <div class="caption has-text-left">
                  <span
                    >Lorem ipsum dolor sit amet, vim brute malis vocibus ex, te
                    mei magna persius. Duo nibh aliquam deleniti no.</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{> footer-light}}