How to Use OWL Carousel?

OWL Carousel is a responsive jQuery plugin used for creating carousels or sliders on websites.

Following the below steps, you will learn how to set up jQuery OWL Carousel on your website.

Reference site: Click Here

Step 1: Include jQuery and OWL Carousel:

You need to include jQuery and the OWL Carousel files in your project. You can either download them or use CDN links.

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

<!-- Include OWL Carousel CSS -->  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">  

<!-- Include OWL Carousel theme -->  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">  

<!-- Include OWL Carousel JS -->  
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Step 2: Inside the HTML Structure:

Create an HTML structure for your carousel. Wrap your carousel items in a container with a class, such as owl-carousel.

<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>  
</div>

Step 3: Initialize the OWL Carousel:

Now, you can initialize the OWL Carousel using jQuery. Below is the basic initialization code to activate the carousel with some options:

<script>  
  $(document).ready(function(){  
    $(".owl-carousel").owlCarousel({  
      items: 3,              
      loop: true,              
      margin: 10,              
      nav: true,              
      dots: true,              
      autoplay: true,          
      autoplayTimeout: 3000    
    });  
  });  
</script>

Explaination:

You can customize the carousel with various options. Some useful ones are: