Here, we will learn how to create an owl carousel testimonial slider with responsive design using Html, CSS and Jquery. The below example can helps to customize the image slides with the responsive design.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Owl Carousel Slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js"></script>
</head>
<body>
<section class="testimonial-slide">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="testimonial_carousel" class="owl-carousel">
<div class="test">
<img class="img-responsive" src="c1.jpg" alt="">
<div class="test-details">
<h5>Lorem Ipsum is simply dummy</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="test">
<img class="img-responsive" src="c2.jpg" alt="">
<div class="test-details">
<h5>Lorem Ipsum is simply dummy</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="test">
<img class="img-responsive" src="c3.jpg" alt="">
<div class="test-details">
<h5>Lorem Ipsum is simply dummy</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="test">
<img class="img-responsive" src="c1.jpg" alt="">
<div class="test-details">
<h5>Lorem Ipsum is simply dummy</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="test">
<img class="img-responsive" src="c2.jpg" alt="">
<div class="test-details">
<h5>Lorem Ipsum is simply dummy</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script>
jQuery(document).ready(function($) {
$('#testimonial_carousel').owlCarousel( {
loop: true,
center: true,
items: 3,
margin: 25,
autoplay: true,
nav:true,
autoplayTimeout: 6000,
smartSpeed: 480,
navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
767: {
items: 2
},
1170: {
items: 3
}
}
});
});
</script>
</html> Add the below css to your file to achieve responsive design. check the link for owl carousel cdn.
Stylesheet:
.testimonial-slide{
background-color: #0fefff;
padding-top: 100px;
padding-bottom: 100px;
}
.test-details {margin: 20px 0 20px 0;}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #000fff;
border: 1px solid #000fff;
text-align: center;
}
.owl-carousel .owl-prev {
left: -70px;
}
.owl-carousel .owl-next {
right: -70px;
}