July 25, 2021

Testimonials slider

<div class="testimonial-area mt-3">
              <div class="container">
                  <div class="row">
                      <div class="col-lg-12">
                          <div class="section-title text-center">
                              <h2><span>What Clients Say?</span></h2>
                          </div>
                      </div>
                  </div>
                  <div class="row ">
                      <div class="col-xl-12">
                          <div class="row testimonial-carousel">
                              <div class="col-lg-12">
                                  <div class="testimonial style-3">
                                      <div class="testimonial-info">
                                          <div class="testimonial-thumb">
                                              <img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/1.jpg" alt="" />
                                          </div>
                                          <div class="testimonial-name">
                                              <h5>Alley soly</h5>
                                              <span>Profession</span>
                                          </div>
                                      </div>
                                      <div class="testimonial-desc">
                                          <p>"Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought”</p>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-lg-12">
                                  <div class="testimonial style-3">
                                      <div class="testimonial-info">
                                          <div class="testimonial-thumb">
                                              <img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/2.jpg" alt="" />
                                          </div>
                                          <div class="testimonial-name">
                                              <h5>Alley soly</h5>
                                              <span>Profession</span>
                                          </div>
                                      </div>
                                      <div class="testimonial-desc">
                                          <p>"Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought”</p>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-lg-12">
                                  <div class="testimonial style-3">
                                      <div class="testimonial-info">
                                          <div class="testimonial-thumb">
                                              <img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/3.jpg" alt="" />
                                          </div>
                                          <div class="testimonial-name">
                                              <h5>Alley soly</h5>
                                              <span>Profession</span>
                                          </div>
                                      </div>
                                      <div class="testimonial-desc">
                                          <p>"Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought”</p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <!--testimonial ends-->

 

 <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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
   <style>
       .testimonial {
  background-color:#ffffff;
  padding:40px;
  border-radius:10px;
  border:1px solid #ebebeb;
  position:relative;
}
.testimonial::after {
  position:absolute;
  top:-20px;
  left:40px; 
  opacity:.20;
}
.testimonial-info {
    display: table;
    width: 100%;
}
.testimonial-thumb {
    vertical-align: middle;
    display: table-cell;
    width: 80px;
    padding-right: 20px;
    height: 60px;
}
.testimonial-thumb img {
  width:60px;
  height:60px;
  border-radius:100%;
}
.testimonial-name {
  display: table-cell;
  vertical-align: middle;
}
.testimonial-name h5 {
  font-size:20px;
  margin-bottom:0;
  color:#222222;
}
.testimonial-name span {
  display:block;
  font-size:12px;
  letter-spacing:2px;
  color:#38c3c7;
  text-transform:uppercase;
  line-height:18px;
}
.testimonial-desc p {
  font-size:20px;
  color:#222222;
  font-style:italic;
  margin-top:25px;
  margin-bottom:0;
  line-height:30px;
}
.testimonial-carousel .slick-dots {
    bottom: -67px;
}
.testimonial-carousel .slick-list {
  padding-top:20px;
}
.testimonial.style-2 {
    border: 0;
    padding: 40px 0;
}
.testimonial.style-2::after {
  top:-25px;
  left:0; 
  opacity:1;
}
.testimonial-carousel-2 .slick-dots {
  text-align:left;
}
.testimonial-carousel-2 .slick-list {
  padding:26px 0 0 0;
}
.testimonial.style-3::after {
  display:none;
}
.testimonial-carousel-3 .slick-list {
  padding:26px 0 0 0;
}
.testimonial-carousel-3 .slick-dots {
  bottom:-67px;
} 
.slick-slider .slick-dots li {
    display: inline-block;
    margin: 0 5px;
  width:auto;
  height:auto;
}
.slick-slider .slick-dots li button {
  font-size:inherit;
    border: none;
    display: block;
    text-indent: -9999em;
    width: 8px;
    height: 8px;
    padding: 0;
    background: #c3edee;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}
.slick-slider .slick-dots li.slick-active button {
    background: #38c3c7;
    width: 38px;
    height: 8px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
   </style>

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

    <script>
   $(document).ready(function(){
    $(".testimonial-carousel").slick({
  dots: true,
  arrows:false,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  adaptiveHeight: true,
  prevArrow: '<i class="fa fa-angle-left"></i>',
  nextArrow: '<i class="fa fa-angle-right"></i>',
  responsive: [
    {
      breakpoint: 1376,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});
   })
    </script>

 

Leave a Reply

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