How to use owl carousel in bootstrap 5?
April 27, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use owl carousel in bootstrap 5 with code example.
Here, we will use owl-carousel owl-theme class to make a owl carousel in bootstrap.
In this bootstrap5 example we will create a simple responsive owl carousel slider with bootstrap5. This Responsive Carousel Slider is fully highly customizable and Carousel Slider.
Example:
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Carousel</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<h4><img src="images/new-zealand.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/city.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/sky.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/pexels-photo-257360.jpeg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/sun1.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/city.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/sky.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/pexels-photo-257360.jpeg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/rock.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/sun1.jpg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/pexels-photo-257360.jpeg" alt="image" /></h4>
</div>
<div class="item">
<h4><img src="images/rock.jpg" alt="image" /></h4>
</div>
</div>
<!--Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<!-- Owl Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- custom JS code after importing jquery and owl -->
<script type="text/javascript">
$(document).ready(function() {
$(".owl-carousel").owlCarousel();
});
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>
</body>
</html> Check the output of the above code example.
All the best 👍
