Bootstrap Snippet Testimonial slider with Owl carousel using HTML CSS Bootstrap Javascript

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 ---------->
        <!-- Google font -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,600i,700,700i,900">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i,800,800i">
        <!-- carousel -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<section class="testimonial_section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                       <div class="about_content">
                            <div class="background_layer"></div>
                            <div class="layer_content">
                                <div class="section_title">
                                    <h5>CLIENTS</h5>
                                    <h2>Happy with<strong>Customers & Clients</strong></h2>
                                    <div class="heading_line"><span></span></div>
                                    <p>If you need any industrial solution we are available for you. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                </div>
                                <a href="#">Contact Us<i class="icofont-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="testimonial_box">
                            <div class="testimonial_container">
                                <div class="background_layer"></div>
                                <div class="layer_content">
                                    <div class="testimonial_owlCarousel owl-carousel">
                                        <div class="testimonials"> 
                                            <div class="testimonial_content">
                                                <div class="testimonial_caption">
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
.testimonial_section {
  display: block;
  overflow: hidden;
}
.testimonial_section:after {
  display: block;
  clear: both;
  content: "";
}
.testimonial_section .about_content {
  background-color: #020d26;
  padding-top: 77px;
  padding-right: 210px;
  padding-bottom: 62px;
  position: relative;
}
.testimonial_section .about_content .background_layer {
  background-color: #020d26;
  width: auto;
  margin-left: -200px;
  right: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.testimonial_section .about_content .layer_content {
  position: relative;
  z-index: 9;
  height: 100%;
}
.testimonial_section .about_content .layer_content .section_title {
  margin-bottom: 24px;
  position: relative;
}
.testimonial_section .about_content .layer_content .section_title:after {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.testimonial_owlCarousel').owlCarousel({
    loop:true,
    margin:10,
    dots:false,
    nav:true,
    autoplay:false,   
    smartSpeed: 3000, 
    autoplayTimeout:4000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Testimonial slider with Owl carousel"
Bootstrap 4.1.1 Snippet by Niloydeysarkar

Related: See More

Questions / Comments:

"Testimonial slider with Owl carousel" Bootstrap 4.1.1 Snippet by Niloydeysarkar

Related: See More

Questions / Comments:

"Testimonial slider with Owl carousel"
Bootstrap 4.1.1 Snippet by Niloydeysarkar