Testimonial Slide

by 25058214

HTML

<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/flickity@2/dist/flickity.css">

<!-- Flickity HTML init -->
<div class="carousel"
  data-flickity='{"wrapAround": true, "cellAlign": "left","pageDots": false } '>
  <div class="carousel-cell">
    <div class="review__content">
      <div class="main__reviews__starts">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 30 28.75">
                <path id="star" d="M29.922,11.356a1.591,1.591,0,0,0-1.373-1.1L19.89,9.474,16.466,1.46a1.594,1.594,0,0,0-2.933,0L10.11,9.474l-8.66.786a1.6,1.6,0,0,0-.905,2.79L7.09,18.79l-1.93,8.5a1.592,1.592,0,0,0,2.371,1.723L15,24.55l7.466,4.464a1.594,1.594,0,0,0,2.373-1.723l-1.93-8.5,6.545-5.739A1.6,1.6,0,0,0,29.922,11.356Zm0,0" transform="translate(0 -0.492)" fill="#ffc107"></path>
              </svg>
              
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 30 28.75">
                <path id="star" d="M29.922,11.356a1.591,1.591,0,0,0-1.373-1.1L19.89,9.474,16.466,1.46a1.594,1.594,0,0,0-2.933,0L10.11,9.474l-8.66.786a1.6,1.6,0,0,0-.905,2.79L7.09,18.79l-1.93,8.5a1.592,1.592,0,0,0,2.371,1.723L15,24.55l7.466,4.464a1.594,1.594,0,0,0,2.373-1.723l-1.93-8.5,6.545-5.739A1.6,1.6,0,0,0,29.922,11.356Zm0,0" transform="translate(0 -0.492)" fill="#ffc107"></path>
              </svg>
              
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 30 28.75">
                <path id="star" d="M29.922,11.356a1.591,1.591,0,0,0-1.373-1.1L19.89,9.474,16.466,1.46a1.594,1.594,0,0,0-2.933,0L10.11,9.474l-8.66.786a1.6,1.6,0,0,0-.905,2.79L7.09,18.79l-1.93,8.5a1.592,1.592,0,0,0,2.371,1.723L15,24.55l7.466,4.464a1.594,1.594,0,0,0,2.373-1.723l-1.93-8.5,6.545-5.739A1.6,1.6,0,0,0,29.922,11.356Zm0,0" transform="translate(0 -0.492)" fill="#ffc107"></path>
              </svg>
              
             ...

CSS

/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif;background:#F0F8FF; }

.carousel {
  max-width:700px;
  padding-bottom:50px;
}

.carousel-cell {
  border-radius:8px;
  background: #fff;
  width: 385px;
  min-height:275px;
  transform: scale(0.70);
  opacity:.3;
  transition: transform .5s ease;
  margin-left:-15px;
  
}
.carousel-cell.is-selected{
  transform: scale(1);
  opacity:1;
  margin-left:0px;
}
.review__content{
  padding:20px 25px;
}
.review__content>h3{font-size:16px;}
.review__content>p{font-size:15px;line-height:1.4;}
.footer__review{
    display: flex;
    align-items: center;
    grid-gap:15px;
    margin-top:40px;
}
.footer_review__logo{
   border-radius:50%;
   width:40px;
   height:40px;
   overflow:hidden;
}
.footer_review__logo>img{
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    }
.footer_review__name-h{
  font-size:14px;
  margin:0;
  line-height:1.7;
}
.footer_review__name-p{
  font-size:14px;
  margin:0;
}
.flickity-prev-next-button.previous {
    right: 60px;
    bottom: 0px;
    top: auto;
    left: auto;
}
.flickity-prev-next-button.next {
    right: 0;
    bottom: 0px;
    top: auto;
    left: auto;
}
.flickity-prev-next-button {
    background: none;
}