Clean Hero Slider

By Ben Owen

carousel orbit js hero

How do I use This?

A responsive slider for your for your home page, with simplicity and cleanness as priority.

HTML

<div class="orbit clean-hero-slider" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container">
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://lorempixel.com/800/350/" alt="image alt text">
          <figcaption class="orbit-caption">
            <h3>Lorem Ipsum Etiam</h3>
            <p>Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
            <a href="#" class="button yellow">Mattis Elit</a>
          </figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://lorempixel.com/800/350/" alt="image alt text">
          <figcaption class="orbit-caption">
            <h3>Ipsum Ornare Ultricies</h3>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="button yellow">Egestas Amet</a>
          </figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://lorempixel.com/800/350/" alt="image alt text">
          <figcaption class="orbit-caption">
            <h3>Malesuada Parturient</h3>
            <p>Fusce dapibus, tellus ac cursus commodo, sit amet risus. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam sit amet non magna.</p>
            <a href="#" class="button yellow">Sollicitudin</a>
          </figcaption>
        </figure>
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="1"><span class="show-for-sr">Lorem Ipsum Etiam</span></button>
    <button data-slide="2"><span class="show-for-sr">Lorem Ipsum Etiam</span></button>
    <button data-slide="3"><span class="show-for-sr">Lorem Ipsum Etiam</span></button>
  </nav>
</div>

$clean-hero-slider-accent: $warning-color;

.clean-hero-slider {
  .orbit-caption {
    width: auto;
    height: auto;
    background: $black;
    position: absolute;
    text-align: center;
    right: 0;
    left: 0;
    padding: 0.2rem 2rem;

    @include breakpoint(medium) {
      @include vertical-center;
      background: rgba(0,0,0,.6);
      text-align: left;
      width: 70%;
      right: 0;
      padding: 1rem 2rem;
    }

    @include breakpoint(xlarge) {
      padding-right: 10%;
    }

    @include breakpoint(xxlarge) {
      padding-right: 20%;
    }

    p {
      font-size: 0.9rem;
      line-height: 1.25;

      @include breakpoint(medium) {
        font-size: 1.1rem;
      }
    }

    h3 {
      color: $clean-hero-slider-accent;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 0;

      @include breakpoint(medium) {
        font-size: 2.5rem;
        font-weight: normal;
      }
    }
  }

  .orbit-slide {
    padding-bottom: 40%;
    background: $black;

    @include breakpoint(medium) {
      padding-bottom: 0;
    }
  }

  .orbit-controls {
    button {
      background: $clean-hero-slider-accent;
      padding: 1rem 0.5rem;

      &:hover {
        background: $white;
        color: $black;
      }
    }

    .orbit-previous {
      @include breakpoint(medium) {
        left: auto;
        right: 2.4rem;
      }
    }

    .orbit-next {
      @include breakpoint(medium) {
        right: 0.5rem;
      }
    }
  }

  .orbit-bullets {
    display: none;

    @include breakpoint(medium) {
      display: block;
      margin-bottom: 0;
      margin-top: -3rem;
      background: none;
    }

    button {
      width: 3rem;
      height: 0.4rem;
      border-radius: 0;
      background-color: $white;

      &.is-active {
        background-color: $clean-hero-slider-accent;
      }
    }
  }

  ul.orbit-container {
    height: auto !important;
  }

  li.orbit-slide {
    max-height: none !important;
  }
}

.clean-hero-slider .orbit-caption {
  width: auto;
  height: auto;
  background: #0a0a0a;
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  padding: 0.2rem 2rem;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-caption {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    text-align: left;
    width: 70%;
    right: 0;
    padding: 1rem 2rem;
  }
}

@media screen and (min-width: 75em) {
  .clean-hero-slider .orbit-caption {
    padding-right: 10%;
  }
}

@media screen and (min-width: 90em) {
  .clean-hero-slider .orbit-caption {
    padding-right: 20%;
  }
}

.clean-hero-slider .orbit-caption p {
  font-size: 0.9rem;
  line-height: 1.25;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-caption p {
    font-size: 1.1rem;
  }
}

.clean-hero-slider .orbit-caption h3 {
  color: #ffae00;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-caption h3 {
    font-size: 2.5rem;
    font-weight: normal;
  }
}

.clean-hero-slider .orbit-slide {
  padding-bottom: 40%;
  background: #0a0a0a;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-slide {
    padding-bottom: 0;
  }
}

.clean-hero-slider .orbit-controls button {
  background: #ffae00;
  padding: 1rem 0.5rem;
}

.clean-hero-slider .orbit-controls button:hover {
  background: #fefefe;
  color: #0a0a0a;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-controls .orbit-previous {
    left: auto;
    right: 2.4rem;
  }
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-controls .orbit-next {
    right: 0.5rem;
  }
}

.clean-hero-slider .orbit-bullets {
  display: none;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-bullets {
    display: block;
    margin-bottom: 0;
    margin-top: -3rem;
    background: none;
  }
}

.clean-hero-slider .orbit-bullets button {
  width: 3rem;
  height: 0.4rem;
  border-radius: 0;
  background-color: #fefefe;
}

.clean-hero-slider .orbit-bullets button.is-active {
  background-color: #ffae00;
}

.clean-hero-slider ul.orbit-container {
  height: auto !important;
}

.clean-hero-slider li.orbit-slide {
  max-height: none !important;
}

Clean Hero Slider

By Ben Owen

Image Hover Link Block

Large Article Header

Responsive Hero Section

Clean Hero Slider

By Ben Owen

Similar Building Blocks

Image Hover Link Block

Large Article Header

Responsive Hero Section