Minimal Testimonial Carousel For Tailwind CSS

Preview:

Description:

A minimal, clean, responsive, Tailwind CSS-powered carousel component for testimonials, reviews, quotes, and much more.

How to use it:

1. The carousel component requires the latest Font Awesome Iconic Font and Tailwind CSS framework.

<link rel="stylesheet" href="/path/to/cdn/tailwind.min.css" />
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />

2. The HTML structure for the testimonial carousel.

<section class="wrapper_carousel flex flex-col justify-center w-full" role="region" aria-label="testimonial carousel">
  <div class="carousel-data relative overflow-hidden flex items-center justify-center w-full mt-8 mb-8">
      <div class="carousel-item" role="group" aria-label="slide 1 of 5">
          <div class="author-profile">
              <img src="https://source.unsplash.com/random/?portrait,face/108x108">
          </div>
          <p class="text_caption italic my-8">
              Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
          </p>
          <span class="caption-author">
              - William T. Riker
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 2 of 5">
          <div class="author-profile">
              <img src="https://source.unsplash.com/random/300×600/?model,portrait,face">
          </div>
          <p class="text_caption italic my-8">
              Taking seamless key performance indicators offline to maximise the long tail. User generated content in real-time will have multiple touchpoints for offshoring.
          </p>
          <span class="caption-author">
              - Sasha Banks
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 3 of 5">
          <div class="author-profile">
              <img src="https://source.unsplash.com/random/300×600/?woman,portrait,face">
          </div>
          <p class="text_caption italic my-8">
              At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
          </p>
          <span class="caption-author">
              - Dana E. Owens
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 4 of 5">
          <div class="author-profile">
              <img src="https://source.unsplash.com/random/300×600/?man,portrait,face">
          </div>
          <p class="text_caption italic my-8">
              Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination.
          </p>
          <span class="caption-author">
              - Robert Booker
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 5 of 5">
          <div class="author-profile">
              <img src="https://source.unsplash.com/random/300×600/?teen,portrait,face">
          </div>
          <p class="text_caption italic my-8">
              Collaboratively administrate markets dynamically procrastinate user directed convergence after installed base benefits without revolutionary ROI.
          </p>
          <span class="caption-author">
              - Ororo Munroe
          </span>
      </div>
  </div>
  <div class="carousel-indicators flex items-center">    
  </div>
  <div class="carousel-controls flex justify-end mt-auto" aria-label="carousel controls">
      <button type="button" class="button_carousel-prev" aria-label="previous"><i class="fas fa-caret-left"></i></button>
      <button type="button" class="button_carousel-next ml-1" aria-label="next"><i class="fas fa-caret-right"></i></button>
  </div>
</section>

3. Load the main carousel.js JavaScript in the document.

<script src="carousel.js"></script>

4. Additional CSS styles.

.wrapper_carousel {
  background: var(--primary-grey);
  height: 500px;
  border-radius: 12px;
  box-shadow: 2px 2px 12px 2px #a4a4a4;
}
.carousel-data {
  max-width: 600px;
  min-height: 320px;
  margin: 0 auto;
  z-index: 100;
  /*overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;*/
}
.carousel-item {
  opacity: 0;
  position: absolute;
  z-index: 500;
  transition: 500ms ease-in-out;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.initial-slide, .active-slide {
  opacity: 1;
  position: relative;
  z-index: 1000;
  visibility: visible;
}
.next, .prev {
  z-index: 900;
}
.next {
  -webkit-animation: animate-right 500ms;
          animation: animate-right 500ms;
}
.prev {
  -webkit-animation: animate-left 500ms;
          animation: animate-left 500ms;
}
@-webkit-keyframes animate-right {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(100%);
  }
}
@keyframes animate-right {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(100%);
  }
}
@-webkit-keyframes animate-left {
  100% {
      transform: translateX(-100%);
  }
  0% {
      transform: translateX(0);
  }
}
@keyframes animate-left {
  100% {
      transform: translateX(-100%);
  }
  0% {
      transform: translateX(0);
  }
}

.author-profile {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
}
.author-profile img {
  min-height: 108px;
  -o-object-fit: cover;
     object-fit: cover;
}
.text_caption {
  font-size: var(--text_lg);
  font-weight: var(--text_weight-medium);
}
.caption-author {
  font-weight: 700;
  font-size: 14px;
}
.carousel-indicators {
  margin: 0 auto;
}
.carousel-indicators button {
  width: 8px;
  height: 8px;
  background: #a4a4a4;
  border-radius: 50%;
  margin-left: 8px;
}
.carousel-indicators button:first-of-type {
  margin-left: 0;
}
.carousel-controls button {
  background: var(--yellow);
  padding: 24px;
  font-size: var(--text_md);
  width: 60px;
  max-width: 100%;
  height: 60px;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-controls button .fas {
  line-height: 1em;
  font-size: 1.25em;
  pointer-events: none;
}
button.current-indicator {
  background: #197ABE;
}
@media only screen and (max-width: 768px) {
  .about-tagline {
      font-size: var(--text_display-lg);
  }
}
@media only screen and (max-width: 700px) {
  .carousel-data {
      padding: 0 16px;
  }
  .text_caption {
      font-size: var(--text_md);
  }
}
@media only screen and (max-width: 640px) {
  .about-tagline {
      font-size: var(--text_display-sm);
  }
  .wrapper_carousel {
      width: 100vw !important;
      position: relative;
      left: 50%;
      margin-left: -50vw;
  }
  .carousel-data {
      padding: 0 24px;
  }
  .text_caption {
      font-size: var(--text_default);
      line-height: 1.75em;
  }
  .carousel-controls button {
      width: 100%;
  }
}
@media only screen and (max-width: 400px) {
  .wrapper_carousel {
      height: 700px;
  }
  .wrapper_carousel .page_title {
      margin-top: 2rem !important;
  }
  .carousel-data {
      margin-bottom: 2rem !important;
  }
  .carousel-indicators {
      margin-bottom: 2rem;
  }
  .carousel-indicators button {
      width: 40px;
  }
}