Table of Contents
Creating a simple carousel with an Owl Carousel
Adding dynamic and responsive carousels to your website makes the appearance of the website look pleasing. One of the popular tools is Owl Carousel to create interactive websites. In this article, we’ll learn the process of integrating Owl-Carousel into the project.
Why use Owl Carousel?
Owl Carousel provides flexibility and customizing options for creating sliders in a simple manner. If you want to show images or videos, this Carousel will provide responsiveness as well. Some reasons why programmers use it:
- Responsive design: It will automatically adjust to various screen sizes including mobile, tablet and desktop devices.
- Customizable: It offers customization options like animation, pagination, autoplay and navigation.
- Lightweight: Despite its functionalities, it loads faster.
- Cross-browser functionality: It supports all browsers.
You may also like our article on Facebook Login Page using HTML and CSS.Building slider with Owl Carousel
Include this code from the official page of Owl-Carousel:
Write this code inside <header> tag.
<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" referrerpolicy="no-referrer" />
<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" referrerpolicy="no-referrer" HTML and CSS Code
Write the following HTML code. You can use images or videos for sliding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.owl-carousel .item {
height: 550px;
padding: 10px;
}
</style>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="doctor.jpg" alt="doctor">
</div>
<div class="item">
<img src="doct.jpg" alt="doctor">
</div>
<div class="item">
<img src="doc.jpg" alt="doctor">
</div>
</div>
</body>
</html>JQuery code
Write this code inside <body> tag
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
autoplay:true,
autoplayTimeout:1000,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
</script>Conclusion
In your web project, integrating Owl-Carousel will enhance user experience. With this powerful feature, you can create a dynamic and responsive site. By following this article you can integrate Owl-Carousel into your website and can even use it for your future projects.
Follow us on Facebook for more such contents.Happy Learning!
