<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<div class="main-wraper bg-grey-2 padd-50">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 mx-auto">
<div class="second-title">
<h4 class="color-dark-2-light">testimonials</h4>
<h2>what our clients say</h2>
</div>
</div>
</div>
<div class="row">
<div class="top-baner arrows">
<div class="swiper-container swiper-swiper-unique-id-2 initialized pagination-hidden" data-autoplay="0"
data-loop="1" data-speed="500" data-slides-per-view="responsive" data-mob-slides="1" data-xs-slides="2"
data-sm-slides="2" data-md-slides="3" data-lg-slides="4" data-add-slides="4" id="swiper-unique-id-2">
<div class="swiper-wrapper"
style="width: 3516px; transform: translate3d(-1465px, 0px, 0px); transition-duration: 0.5s; height: 426px;">
<div class="swiper-slide" data-val="0" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">sea tour</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">Balbir Kaur</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide active" data-val="1" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">mountains</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">Superbwebdeveloper</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide" data-val="2" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">sea tour</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">Lovely</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide" data-val="4" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">mountains</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">Codesnippets</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide" data-val="0" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">sea tour</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">inna lunoe</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-active active" data-val="1"
style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">mountains</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">alina, mark</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-visible" data-val="2" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">sea tour</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">george ross</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-visible" data-val="4" style="width: 293px; height: 426px;">
<div class="tour-item style-3">
<div class="radius-top">
<img src="https://via.placeholder.com/250" alt="">
<div class="tour-weather">mountains</div>
</div>
<div class="tour-desc bg-white">
<img class="tm-people" src="https://via.placeholder.com/150" alt="">
<h4><a class="tour-title color-dark-2 link-green" href="#">mikel, kim</a></h4>
<div class="tour-text color-grey-3">“Nunc cursus libero purus ac congue arcu cursus ut sed vitae
pulvinar massa rta nequetiam.”</div>
</div>
</div>
</div>
</div>
<div class="swiper-arrow-left offers-arrow color-3"><span class="fa fa-angle-left"></span></div>
<div class="swiper-arrow-right offers-arrow color-3"><span class="fa fa-angle-right"></span></div>
</div>
</div>
</div>
</div>
</div>
.second-title>*:last-child {
padding-bottom: 0px;
letter-spacing: 6px;
}
.second-title h4 {
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 7px;
font-size: 16px;
line-height: 22px;
text-transform: uppercase;
}
.second-title h2 {
padding-bottom: 24px;
letter-spacing: 6px;
font-size: 32px;
line-height: 32px;
font-weight: 700;
text-transform: uppercase;
}
.top-baner {
position: relative;
width: 100%;
}
.tour-weather {
position: absolute;
top: 20px;
left: 20px;
font-size: 14px;
line-height: 28px;
font-weight: 700;
color: #222;
background: #fff;
-moz-border-radius: 7px;
border-radius: 7px;
padding: 0 14px;
height: 34px;
}
.tour-item.style-3 .tour-weather {
font-size: 12px;
line-height: 34px;
text-transform: uppercase;
letter-spacing: 1px;
}
.tour-item.style-3 .tour-desc {
position: relative;
padding-top: 55px;
padding-left: 25px;
padding-right: 25px;
}
.tour-item.style-3 .tm-people {
position: absolute;
top: -50px;
left: 50%;
margin-left: -50px;
border: 5px solid #fff;
-moz-border-radius: 100%;
border-radius: 100%;
width: 100px;
}
.tour-item.style-3 .rate {
margin-bottom: 13px;
}
.tour-item.style-3 .rate span {
font-size: 9px;
padding: 0px 1.5px;
}
.tour-item h4 {
font-size: 16px;
line-height: 22px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
.tour-item .tour-title {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;
}
.tour-item .tour-desc {
text-align: center;
padding-top: 25px;
padding-bottom: 27px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.tour-item.style-3 .tour-text {
line-height: 20px;
}
.color-grey-3 {
color: #bebebe;
}
.tour-item.style-3 .tour-title {
font-size: 16px;
line-height: 20px;
letter-spacing: 1.2px;
}
.tour-item.style-3 .tour-text {
line-height: 20px;
}
.offers-arrow {
background: #fff;
border: 5px solid #eaeaea;
}
.offers-arrow.swiper-arrow-left {
left: 0px;
}
.offers-arrow.swiper-arrow-right {
right: 0px;
}
.offers-arrow span {
font-size: 16px;
color: #222;
line-height: 10px;
padding-top: 9px;
}
.offers-arrow:hover span {
color: #222;
}
.offers-arrow:hover {
background: #fff;
border: 5px solid #ff6600;
}
.tour-item.style-3 .rate {
margin-bottom: 13px;
}
.tour-item.style-3 .rate span {
font-size: 9px;
padding: 0px 1.5px;
}
.tour-item.style-3 .tour-title {
font-size: 16px;
line-height: 20px;
letter-spacing: 1.2px;
}
.tour-item.style-3 .tour-text {
line-height: 20px;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
direction: ltr;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
height: auto;
}
.swiper-wrapper {
position: relative;
width: 100%;
-webkit-transition-property: -webkit-transform, left, top;
-webkit-transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: ease;
-moz-transition-property: -moz-transform, left, top;
-moz-transition-duration: 0s;
-moz-transform: translate3d(0px, 0, 0);
-moz-transition-timing-function: ease;
-o-transition-property: -o-transform, left, top;
-o-transition-duration: 0s;
-o-transform: translate3d(0px, 0, 0);
-o-transition-timing-function: ease;
-o-transform: translate(0px, 0px);
-ms-transition-property: -ms-transform, left, top;
-ms-transition-duration: 0s;
-ms-transform: translate3d(0px, 0, 0);
-ms-transition-timing-function: ease;
-webkit-transition-property: -webkit-transform, left, top;
-moz-transition-property: -moz-transform, left, top;
-o-transition-property: -o-transform, left, top;
transition-property: transform, left, top;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: url(../images/drag.png) 16 9, ew-resize !important;
margin: 0 auto;
height: inherit !important;
float: left;
}
.swiper-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
float: left;
height: inherit !important;
position: relative;
}
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
}
.pagination-hidden.pagination {
display: none;
}
.swiper-arrow-left,
.swiper-arrow-right {
cursor: pointer;
-webkit-transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);
-moz-transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);
-o-transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);
transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);
text-align: center;
z-index: 5;
width: 40px;
height: 40px;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 50%;
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.arrow-wrapp {
position: absolute;
left: 0px;
top: 50%;
width: 100%;
margin: 0 auto;
}
.cont-1170 {
float: none;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
max-width: 1170px;
}
.sw-arrow {
border: 2px solid rgba(255, 255, 255, 0.2);
background: none;
}
.sw-arrow span {
font-size: 16px;
color: #fff;
line-height: 10px;
padding-top: 12px;
}
.swiper-arrow-left {
left: 15px;
}
.swiper-arrow-right {
right: 15px;
}
.m-200 .swiper-arrow-left {
margin-top: -200px;
}
.m-200 .swiper-arrow-right {
margin-top: -200px;
}
$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
slidesPerGroup: 4,
spaceBetween: 10,
loop: true,
loopFillGroupWithBlank: true,
/* pagination: {
el: '.swiper-pagination',
clickable: true,
},*/
navigation: {
nextEl: '.swiper-arrow-right',
prevEl: '.swiper-arrow-left',
},
breakpoints: {
992: {
slidesPerView: 4,
spaceBetween: 10,
},
768: {
slidesPerView: 3,
spaceBetween: 10,
},
576: {
slidesPerView: 2,
spaceBetween: 10,
},
320: {
slidesPerView: 1,
spaceBetween: 10,
},
100: {
slidesPerView: 1,
spaceBetween: 10,
}
}
});
});
