How to use owl carousel in bootstrap 5?

Hi 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.

Bootstrap, Owl, Carousel, 5

All the best 👍