Implementing latest owl carousel

Sindhuja · January 2024

First, include the necessary CSS and JS files in <head> your HTML file. Make sure to include jQuery before Owl Carousel.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Owl Carousel Example</title>
    <link rel="stylesheet" href="path/to/owl.carousel.min.css">
    <link rel="stylesheet" href="path/to/owl.theme.default.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="path/to/owl.carousel.min.js"></script>
<script>
    $(document).ready(function(){
        $(".owl-carousel").owlCarousel({
            items: 3, // Number of items to show
            loop: true, // Infinite loop
            margin: 10, // Space between items
            autoplay: true, // Autoplay
            autoplayTimeout: 3000, // Autoplay interval in milliseconds
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        });
    });
</script>

</head>
<body>
   <div class="owl-carousel">
    <div class="item"><img src="image1.jpg" alt="Item 1"></div>
    <div class="item"><img src="image2.jpg" alt="Item 2"></div>
    <div class="item"><img src="image3.jpg" alt="Item 3"></div>
    <!-- Add more items as needed -->
   </div>
</body>
</html>

->Finally, initialize the Owl Carousel using jQuery.
->Adjust the options in the owlCarousel() function to suit your needs. In this example, it sets the number 
  of items to show, enables the infinite loop, sets the margin between items, and configures responsive 
  settings for different screen sizes.