Bootstrap Snippet Testimonial Carousel Bootstrap 4 using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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,
            }
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Testimonial Carousel Bootstrap 4 "
Bootstrap 4.1.1 Snippet by superbwebdeveloper

Related: See More

Questions / Comments:

"Testimonial Carousel Bootstrap 4 " Bootstrap 4.1.1 Snippet by superbwebdeveloper

Related: See More

Questions / Comments:

"Testimonial Carousel Bootstrap 4 "
Bootstrap 4.1.1 Snippet by superbwebdeveloper