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:
- items: Number of items visible at once (can be a number or responsive value).
- loop: If true, it loops back to the start after reaching the last item.
- margin: The space between items.
- nav: If true, shows next and previous buttons.
- dots: If true, show the pagination dots.
- autoplay: If true, it starts automatically.
- autoplayTimeout: Delay between autoplay cycles.
By using OWL Carousel, you can create attractive and responsive slide designs on your website.
