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?

Screenshot

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.