In my main tag, I have implement the images for my slide banners.
<main id="main-site">
<!-- Owl Carousel code-->
<section id="banner-area">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./images/banner.png" alt="Banner1">
</div>
<div class="item">
<img src="./images/banner2.png" alt="Banner2">
</div>
</div>
</section>
</main>
and I have initialize the Owl Carousel on Javascript.
$(document).ready(function() {
$("#banner-area.owl-carousel").owlCarousel( {
dots: true,
items: 1
});
});
And linked the javascript and also the Owl Carousel jQuery plugin to access the javascript file.
<!--Owl Carousel JS-->
<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>
<!--Custom JS-->
<script src="./index.js"></script>
But even after all these. I still didn't get any banner on my page... what's the problem?
Edit: I was able to fix it. but I only can fix it when I delete the #banner-area, but I wish to fix it without deleting the id.
CodePudding user response:
You should add a space here :
$("#banner-area .owl-carousel").owlCarousel( {