Full-Screen Image Slider

By Harry Manchanda

F6
#
image-slider orbit container
How do I use This?

A simple but efficient full screen image slider created on top of Foundation's Orbit.

HTML
<div class="fullscreen-image-slider">
  <div class="orbit" role="region" aria-label="FullScreen Pictures" data-orbit>
    <ul class="orbit-container">
      <button class="orbit-previous">
        <span class="show-for-sr">Previous Slide</span>
        <span class="nav fa fa-chevron-left fa-3x"></span>
      </button>
      <button class="orbit-next">
        <span class="show-for-sr">Next Slide</span>
        <span class="nav fa fa-chevron-right fa-3x"></span>
      </button>
      <li class="is-active orbit-slide">
        <img class="orbit-image" src="https://i.imgur.com/16z9ObN.jpg" alt="Space">
        <figcaption class="orbit-caption">
          <h1>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit.</h1>
        </figcaption>
      </li>
      <li class="orbit-slide">
        <img class="orbit-image" src="https://i.imgur.com/JD4Caxa.jpg" alt="Space">
        <figcaption class="orbit-caption">
          <h1>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit.</h1>
        </figcaption>
      </li>
      <li class="orbit-slide">
        <img class="orbit-image" src="https://i.imgur.com/rsTQbNV.jpg" alt="Space">
        <figcaption class="orbit-caption">
          <h1>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit.</h1>
        </figcaption>
      </li>
    </ul>
  </div>
</div>



.fullscreen-image-slider {
  .orbit-image {
    width: 100%;
    height: 100vh;
  }

  .orbit-caption {
    bottom: 50%;
    transform: translateY(50%);
    background: none;
    text-align: center;
    color: $white;
    font-weight: bold;
  }
}





.fullscreen-image-slider .orbit-image {
  width: 100%;
  height: 100vh;
}

.fullscreen-image-slider .orbit-caption {
  bottom: 50%;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
  background: none;
  text-align: center;
  color: #fefefe;
  font-weight: bold;
}
JS

Similar Building Blocks

containers

Vertical Testimonial Block

F6
by Rafi
containers

Social Media Footer

F6
by Laurel Beyers
containers

Marketing Site Hero Section

F6
by Rafi