Owl Carousel Responsive Testimonial Slider – Free Download Bootstrap 4.0 Template

Owl Carousel Responsive Testimonial Slider – Free Download Bootstrap 4.0 Template

Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

 

 

Free download Bootstrap 4 Beautiful Responsive Ready Made Testimonial Carousel | Slider Snippet

 

Plugin Info


FILE SIZE: 744 KB
OFFICIAL WEBSITE: Go to website
LICENSE: MIT

 

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
    <link rel='stylesheet' href='css/bootstrap.min.css'>
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/slider.css">

</head>

<body>


    <!-- Reviews -->
    <section class="reviews">
        <h4 class="main-title text-center font-weight-bold pb-4">WHAT CUSTOMERS SAY</h4>

        <div class="container">
            <div class="owl-carousel">

                <!-- card -->
                <div class="item">
                    <div class=" card">
                        <div class="row">
                            <div class="col-xs-7 col-7 info-col">
                                <h4 class="title">JOHN CHARLES</h4>
                                <h6 class="sub-title">Creative Marketer</h6>
                                <ul>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4 col-4 img-col">
                                <div class="user" style="background-image: url('images/user.jpg')"></div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 p-col">
                                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa libero eveniet,
                                    voluptatibus
                                    qui facere aut!</p>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- card -->
                <div class="item">
                    <div class=" card">
                        <div class="row">
                            <div class="col-xs-7 col-7 info-col">
                                <h4 class="title">JOHN CHARLES</h4>
                                <h6 class="sub-title">Creative Marketer</h6>
                                <ul>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4 col-4 img-col">
                                <div class="user" style="background-image: url('images/user-2.jpg')"></div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 p-col">
                                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa libero eveniet,
                                    voluptatibus
                                    qui facere aut!</p>
                            </div>
                        </div>
                    </div>
                </div>



                <!-- card -->
                <div class="item">
                    <div class=" card">
                        <div class="row">
                            <div class="col-xs-7 col-7 info-col">
                                <h4 class="title">JOHN CHARLES</h4>
                                <h6 class="sub-title">Creative Marketer</h6>
                                <ul>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                    <li>
                                        <i class="fa fa-star"></i>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4 col-4 img-col">
                                <div class="user" style="background-image: url('images/user-1.jpg')"></div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 p-col">
                                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa libero eveniet,
                                    voluptatibus
                                    qui facere aut!</p>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </section>




    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>



</body>

</html>

 

 

 

Javascript

Now Add This Javscript to the Index Page

// Reviews slider
    $(".reviews .owl-carousel").owlCarousel({
        loop: true,
        margin: 35,
        nav: true,
        center: true,
        autoplay: true,
        navText: [
            '<i class="fa fa-angle-left"></i>',
            '<i class="fa fa-angle-right"></i>'
        ],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            750: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    });

 

 

Download The Files. start using it.

Download Zip

 

Leave a Reply

avatar
  Subscribe  
Notify of
Close Menu