jQuery OWL Carousel Testimonials Slider

Learn how to create a jQuery OWL Carousel Testimonials slider to showcase the client feedback. It is a good design and a responsive slider.

Its a touch enable and works on almost all modern browsers. Now you can easily showcase your client feedback on your website is a nice and beautiful way.

This OWL carousel comes with great features that allow your site visitor to easily navigate through each feedback by using it’s next and previous button.

Furthermore, the slider also has the dot navigation and it supports the swipe ( MOuse Drap ) function to provide additional features.

Due to its wide range of features, you can easily customize its design and functionality and make it perfect just according to your website layout.

In addition, this responsive testimonials slider support almost all kind of HTML element which allow you to add the content, div element, heading and place client photo.

Therefore, everything is predefined and you just need to edit the HTML structure to customize it. Add your own content and create an unlimited slider.

Moreover, because the client feedback slider depends upon the OWL slider so it’s quite easy to customize its options and configuration.

How to Create Owl Carousel Testimonials Slider

To build the slider for adding the testimonials on your website, you need to download the files and add them to your project.

First of all, you need to add it’s styling files into your HTML document. Include these CSS files into the taghead of your webpage.

<!-- OWL Carousel CSS -->
<link rel="stylesheet" href="css/owl-carousel.css">
<link rel="stylesheet" href="css/owl-theme-default.css">
<link rel="stylesheet" href="css/style.css">

Next step to add the jQuery and Owl Javascript files to activate the testimonial slider.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- OWL Carousel JS -->
<script src="js/owl-carousel.js"></script>

<!-- Custom Script -->
<script src="js/script.js"></script>

Finally, we will create the HTML structure like below. You can change the image URL to add your own and similar, you can change the content with your own content.

<div class="membership-include-container">
<h2>ANNUAL MEMBERSHIP INCLUDES</h2>
<div class="owl-carousel owl-theme membership-include">
    <div class="item" style="background-image: url(img/icon_01.png); background-repeat: no-repeat; background-position: right center; background-size: contain;">
        <div class="left" style="background-image: url(img/slide_01.jpg); background-repeat: no-repeat; background-position: right center; background-size: cover;">
        </div>
        <div class="right">
            <h3>Access to a continually expanding library of resources.</h3>
            <div class="image">
                <div><img src="img/user_01.jpg" class="user-photo" alt="user"></div>
                <div>
                    <p class="text">"The library proved to be very invaluable to me and my team giving us all the elements we needed to make vital decisions."</p>
                    <div class="author">Authony Bear - <strong>Water Board</strong></div>
                </div>
            </div>
            <a href="#" class="btn blue">Become a Member</a>
        </div>
    </div>
    <div class="item" style="background-image: url(img/icon_02.png); background-repeat: no-repeat; background-position: right center; background-size: contain;">
        <div class="left" style="background-image: url(img/slide_02.jpg); background-repeat: no-repeat; background-position: right center; background-size: cover;">
        </div>
        <div class="right">
            <h3>Access to a continually expanding library of resources.</h3>
            <div class="image">
                <div><img src="img/user_02.jpg" class="user-photo" alt="user"></div>
                <div>
                    <p class="text">"The library proved to be very invaluable to me and my team giving us all the elements we needed to make vital decisions."</p>
                    <div class="author">Authony Bear - <strong>Water Board</strong></div>
                </div>
            </div>
            <a href="#" class="btn blue">Become a Member</a>
        </div>
    </div>
    <div class="item" style="background-image: url(img/icon_03.png); background-repeat: no-repeat; background-position: right center; background-size: contain;">
        <div class="left" style="background-image: url(img/slide_03.jpg); background-repeat: no-repeat; background-position: right center; background-size: cover;">
        </div>
        <div class="right">
            <h3>Access to a continually expanding library of resources.</h3>
            <div class="image">
                <div><img src="img/user_03.jpg" class="user-photo" alt="user"></div>
                <div>
                    <p class="text">"The library proved to be very invaluable to me and my team giving us all the elements we needed to make vital decisions."</p>
                    <div class="author">Authony Bear - <strong>Water Board</strong></div>
                </div>
            </div>
            <a href="#" class="btn blue">Become a Member</a>
        </div>
    </div>
</div>
</div>

That’s it. You are done with create a nice looking slider for adding the testimonials on your website.