January 29, 2022

Testimonial Carousel

<section class="pos-r o-hidden" >
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="testimonial-inner" class="testimonial-carousel carousel slide testimonial-inner" data-ride="carousel" data-interval="2500">
          <!-- Wrapper for slides -->
          <div class="row">
            <div class="col-lg-10 col-md-9 col-sm-12 ml-auto">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <div class="testimonial style-3">
                    <div class="testimonial-img">
                      <img class="img-center" src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/1.jpg" alt="">
                    </div>
                    <div class="testimonial-content">
                      <div class="testimonial-quote"><i class="fa fa-quote-left"></i>
                      </div>
                      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
                      <div class="testimonial-caption">
                        <h5>Lana Roadse</h5>
                        <label>CEO of tolmatol</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="testimonial style-3">
                    <div class="testimonial-img">
                      <img class="img-center" src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/2.jpg" alt="">
                    </div>
                    <div class="testimonial-content">
                      <div class="testimonial-quote"><i class="fa fa-quote-left"></i>
                      </div>
                      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
                      <div class="testimonial-caption">
                        <h5>Lana Roadse</h5>
                        <label>CEO of tolmatol</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="testimonial style-3">
                    <div class="testimonial-img">
                      <img class="img-center" src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/3.jpg" alt="">
                    </div>
                    <div class="testimonial-content">
                      <div class="testimonial-quote"><i class="fa fa-quote-left"></i>
                      </div>
                      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
                      <div class="testimonial-caption">
                        <h5>Lana Roadse</h5>
                        <label>CEO of tolmatol</label>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Item -->
              </div>
              <!-- End Carousel Inner -->
            </div>
          </div>
          <div class="controls">
            <ul class="nav">
              <li data-target="#testimonial-inner" data-slide-to="0" class="active">
                <a href="#">
                  <img class="img-fluid" src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/1.jpg" alt="">
                </a>
              </li>
              <li data-target="#testimonial-inner" data-slide-to="1">
                <a href="#">
                  <img class="img-fluid" src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/2.jpg" alt="">
                </a>
              </li>
              <li data-target="#testimonial-inner" data-slide-to="2">
                <a href="#">
                  <img class="img-fluid" src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/3.jpg" alt="">
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- End Carousel -->
      </div>
    </div>
  </div>
</section>

 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <style>
        .pos-r {
    position: relative;
}
.testimonial, .testimonial.box {display: flex; align-items: center;}
.testimonial .testimonial-img,
.testimonial.box .testimonial-img {border-radius: 40% 0% 20% 0; display: inline-block; overflow: hidden; position: relative; margin-right: 30px; width: 100%; }
.testimonial .testimonial-img img,
.testimonial.box .testimonial-img img{border-radius: 0; max-height: 350px;}
.testimonial .testimonial-quote {color: #ffe2e1; left: 0; right: inherit; transform: rotate(-180deg);}
.testimonial-carousel.testimonial-inner .controls{position: absolute; height: 100%; width: 100%; bottom: 0;}
.testimonial-carousel.testimonial-inner .controls li{ position: absolute; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border-radius: 100%; z-index: 99; opacity: 0.6; width: 130px; height: 130px; margin: inherit; float: none; width: 80px; height: 80px; animation: inherit;}
        .testimonial-carousel.testimonial-inner i { font-size: 45px;}
.testimonial-inner .controls li:nth-child(1){left: 0; bottom: 0%;}
.testimonial-inner .controls li:nth-child(2){left: 3%; bottom: 30%;}
.testimonial-inner .controls li:nth-child(3){left: 0; bottom: 60%;}
.testimonial-carousel.testimonial-inner .controls li.active{opacity: 1;}
        .nav li img { border-radius: 50%; }
        
        @media(max-width:991px){
            .testimonial, .testimonial.box { display: block; margin: auto;}
            .testimonial .testimonial-img img, .testimonial.box .testimonial-img img { max-height: 180px; margin: auto; display: block; }
            .carousel {
    position: relative;
    text-align: center;
}
        }
    </style>

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *