Testimonial Slider

By Laurel Beyers

F6
#
testimonial slider containers quote
How do I use This?

A Responsive slider container for testimonials and quotes from individuals or companies.

HTML
<!-- slider code -->

<div class="orbit testimonial-slider-container" role="region" aria-label="testimonial-slider" data-orbit>
  <ul class="orbit-container">
    <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>

    <!-- content slide 1 -->

    <li class="is-active orbit-slide">
      <div class="testimonial-slide row">
        <div class="small-12 large-9 column">
          <div class="row align-middle testimonial-slide-content">
            <div class="small-12 medium-4 column hide-for-small-only profile-pic">
              <img src="https://placeimg.com/300/300/nature">
            </div>
            <div class="small-12 medium-8 column testimonial-slide-text">
              <p class="testimonial-slide-quotation">Hide when guests come over instantly break out into full speed gallop across the house for no reason mrow touch water with paw then recoil in horror.</p>
              <div class="testimonial-slide-author-container">
                <div class="small-profile-pic show-for-small-only">
                  <img src="https://placeimg.com/50/50/nature">
                </div>
                <p class="testimonial-slide-author-info">Fleas Witherspoon<br><i class="subheader">Cat World Inc.</i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

    <!--content slide 2 -->

    <li class="orbit-slide">
      <div class="testimonial-slide row">
        <div class="small-12 large-9 column">
          <div class="row align-middle testimonial-slide-content">
            <div class="small-12 medium-4 column hide-for-small-only profile-pic">
              <img src="https://placeimg.com/300/300/architecture">
            </div>
            <div class="small-12 medium-8 column testimonial-slide-text">
              <p class="testimonial-slide-quotation">Hide when guests come over instantly break out into full speed gallop across the house for no reason mrow touch water with paw then recoil in horror.</p>
              <div class="testimonial-slide-author-container">
                <div class="small-profile-pic show-for-small-only">
                  <img src="https://placeimg.com/50/50/architecture">
                </div>
                <p class="testimonial-slide-author-info">Fleas Witherspoon<br><i class="subheader">Cat World Inc.</i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

    <!-- content slide 3 -->

    <li class="orbit-slide">
      <div class="testimonial-slide row">
        <div class="small-12 large-9 column">
          <div class="row align-middle testimonial-slide-content">
            <div class="small-12 medium-4 column hide-for-small-only profile-pic">
              <img src="https://placeimg.com/300/300/animals">
            </div>
            <div class="small-12 medium-8 column testimonial-slide-text">
              <p class="testimonial-slide-quotation">Hide when guests come over instantly break out into full speed gallop across the house for no reason mrow touch water with paw then recoil in horror.</p>
              <div class="testimonial-slide-author-container">
                <div class="small-profile-pic show-for-small-only">
                  <img src="https://placeimg.com/50/50/animals">
                </div>
                <p class="testimonial-slide-author-info">Fleas Witherspoon<br><i class="subheader">Cat World Inc.</i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

    <!-- content slide 4 -->

    <li class="orbit-slide">
      <div class="testimonial-slide row">
        <div class="small-12 large-9 column">
          <div class="row align-middle testimonial-slide-content">
            <div class="small-12 medium-4 column hide-for-small-only profile-pic">
              <img src="https://placeimg.com/300/300/any">
            </div>
            <div class="small-12 medium-8 column testimonial-slide-text">
              <p class="testimonial-slide-quotation">Hide when guests come over instantly break out into full speed gallop across the house for no reason mrow touch water with paw then recoil in horror.</p>
              <div class="testimonial-slide-author-container">
                <div class="small-profile-pic show-for-small-only">
                  <img src="https://placeimg.com/50/50/any">
                </div>
                <p class="testimonial-slide-author-info">Fleas Witherspoon<br><i class="subheader">Cat World Inc.</i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
<!-- slider close -->


.testimonial-slider-container {
  background: $light-gray;
  padding: 1rem 1rem;

  .orbit-previous,
  .orbit-next {
    color: $black;

    &:hover, &:active, &:focus {
      background-color: transparent;
    }
  }
  
  .orbit-previous {
    left: -1rem;
  }
  
  .orbit-next {
    right: -1rem;
  }

  .testimonial-slide {
    display: flex;
    justify-content: center;
  }

  .testimonial-slide-content {
    padding: 1rem 1.5rem;

    @media screen and (min-width: 40em) {
      padding: 1rem 4rem;
    }
  }

  .profile-pic {
    max-width: 225px;
  }

  .testimonial-slide-text {
    padding-left: 3rem;
  }

  .testimonial-slide-quotation {
    font-size: 1.2rem;
    position: relative;

    &::before {
      content: "“";
      font-size: 6rem;
      color: lighten($black, 80%);
      position: absolute;
      top: -3rem;
      left: -3rem;
    }
  }

  .testimonial-slide-author-container {
    display: flex;

    @include breakpoint(small only) {
      .testimonial-slide-author-info {
        margin-left: 1rem;
      }
    }
  }
}


@charset "UTF-8";

.testimonial-slider-container {
  background: #e6e6e6;
  padding: 1rem 1rem;
}

.testimonial-slider-container .orbit-previous,
.testimonial-slider-container .orbit-next {
  color: #0a0a0a;
}

.testimonial-slider-container .orbit-previous:hover, .testimonial-slider-container .orbit-previous:active, .testimonial-slider-container .orbit-previous:focus,
.testimonial-slider-container .orbit-next:hover,
.testimonial-slider-container .orbit-next:active,
.testimonial-slider-container .orbit-next:focus {
  background-color: transparent;
}

.testimonial-slider-container .orbit-previous {
  left: -1rem;
}

.testimonial-slider-container .orbit-next {
  right: -1rem;
}

.testimonial-slider-container .testimonial-slide {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.testimonial-slider-container .testimonial-slide-content {
  padding: 1rem 1.5rem;
}

@media screen and (min-width: 40em) {
  .testimonial-slider-container .testimonial-slide-content {
    padding: 1rem 4rem;
  }
}

.testimonial-slider-container .profile-pic {
  max-width: 225px;
}

.testimonial-slider-container .testimonial-slide-text {
  padding-left: 3rem;
}

.testimonial-slider-container .testimonial-slide-quotation {
  font-size: 1.2rem;
  position: relative;
}

.testimonial-slider-container .testimonial-slide-quotation::before {
  content: "“";
  font-size: 6rem;
  color: #d6d6d6;
  position: absolute;
  top: -3rem;
  left: -3rem;
}

.testimonial-slider-container .testimonial-slide-author-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 39.9375em) {
  .testimonial-slider-container .testimonial-slide-author-container .testimonial-slide-author-info {
    margin-left: 1rem;
  }
}
JS

Similar Building Blocks

containers

Todo List Card

F6
by Kevin Ball
containers

3 Column Footer with contact form

F6
by Kevin Neal
containers

Mobile Action Sheet

F6
by Kevin Ball