En mi etiqueta principal, implementé las imágenes para mis banners de diapositivas.

 <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>

y he inicializado Owl Carousel en Javascript.

 $(document).ready(function() { $("#banner-area.owl-carousel").owlCarousel( { dots: true, items: 1 }); });

Y vinculó el javascript y también el complemento Owl Carousel jQuery para acceder al archivo javascript.

 <!--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>

Pero incluso después de todo esto. Sigo sin recibir ningún banner en mi página... ¿cuál es el problema?

Captura de pantalla

Edito: pude solucionarlo. pero solo puedo arreglarlo cuando elimino el #banner-area, pero deseo arreglarlo sin eliminar la identificación.