var swiper = new Swiper('.ranker-slide', {
spaceBetween: 30,
autoplay: {
delay: 2500,
},
loop: true,
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 20
},
767: {
slidesPerView: 2,
spaceBetween: 30
},
991: {
slidesPerView: 3,
spaceBetween: 40
}
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
<!-- Testimonial start-->
<div class="testimonial">
<div class="row">
<div class="col-lg-12">
<div class="testimonial-title">
<h2>Client Testimonial</h2>
</div>
<div class="testimonial-slider">
<div class="swiper-container sliders">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="client-slide">
<div class="client-img">
<img src="images/testimonial-img.png" />
</div>
<div class="client-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
<h2>Mike Bhand,CEO,Company</h2>
</div>
<div class="client-content">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonial end -->
/************************* Testimonial ******************/
.testimonial{
padding: 100px 0;
overflow: hidden;
}
.testimonial-title h2{
font-family: 'Open Sans', sans-serif;
font-size: 36px;
font-weight: 600;
line-height: 1.2em;
color: #1c97c4;
text-align: center;
margin-bottom: 60px;
}
.swiper-container {
width: 80%;
height: 100%;
}
.client-slide{
text-align: center;
}
.swiper-slide img{
width: 100px;
height: 100px;
}
.swiper-button-next,
.swiper-button-prev{
background: #f1f1f1;
height: 30px;
width: 30px;
border-radius: 6px;
}
.swiper-button-next:after,
.swiper-button-prev:after{
font-size: 10px;
font-weight: 900;
color: #4c4c4c;
}
.client-desc{
padding: 0px 120px;
text-align: center;
}
.client-desc p{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.8em;
color: #4c4c4c;
padding: 30px 0px;
}
.client-desc h2{
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1.2em;
color: #4c4c4c;
}