In this blog, I have show you how you can create a slider using Owl Slider and jQuery.
This slider can be used at multiple places
- Product Slider
- Home Page Slider
- Image Slider
Copy the below code and implement on your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"
></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="owlcarousel/assets/owl.carousel.min.css" />
<link
rel="stylesheet"
href="owlcarousel/assets/owl.theme.default.min.css"
/>
<title>Document</title>
</head>
<body>
<h1>hello</h1>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div class="item">
<img alt="1" src="./images/1.jpg" width="100px" />
</div>
<div class="item">
<img alt="2" src="./images/2.jpg" width="100px" />
</div>
<div class="item">
<img alt="3" src="./images/3.jpg" width="100px" />
</div>
<div class="item">
<img alt="4" src="./images/4.jpg" width="100px" />
</div>
<div class="item">
<img alt="5" src="./images/5.jpg" width="100px" />
</div>
<div class="item">
<img alt="6" src="./images/6.jpg" />
</div>
<div class="item">
<img alt="7" src="./images/7.jpg" />
</div>
</div>
<script>
$(document).ready(function () {
console.log("own ready");
$(".owl-carousel").owlCarousel({
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: false,
loop: false,
dots: true,
dotsEach: true,
dotsData: true,
dotsContainer: true,
rewind: false,
nav: true,
margin: 10,
// autoWidth: true,
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 1,
},
350: {
items: 2,
},
600: {
items: 4,
},
1000: {
items: 5,
},
},
});
$(".owl-carousel").click(".owl-next", function () {
console.log("dots end");
$(".own-next .disabled").css("display:none!important");
});
});
</script>
</body>
</html>
Hope this article helped.
If yes, please share with your friends and needy.
