Mi carrusel de búhos no funciona. Cuando agrego la imagen, todo lo que hace es agregar otra imagen debajo de la primera. Tampoco hay puntos deslizantes. ¿Cuál es el problema aquí?
¿Podría ser que me perdí una hoja de estilo o js para usar?
Ya revisé el JavaScript y la hoja de estilo de mi carrusel de búhos y todos están en los directorios apropiados.
$('.slider1').owlCarousel({ loop: true, nav: false, dots: true, margin: 128, center: true, items: 1, mouseDrag: false, animateOut: 'fadeOutRight', animateIn: 'fadeInLeft', autoplay: true }); .slider1 { display: block; position: relative; top: 300px; width: 800px; right: 90px; z-index: 1; } .slider-content { overflow: hidden; height: 500px; } .slider-content .slider-item { border-radius: 50px; margin-bottom: 42px; position: relative; height: 100%; width: 100%; opacity: 1; } .slider-content .slider-item p { font-size: 0.938rem; margin-bottom: 0; } .slider-content .slider-item:after { position: absolute; content: ""; top: 100%; right: 34px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 17px solid #eef6f9; } .slider1 .owl-dots { display: flex; display: -webkit-box; display: -ms-flex; display: -ms-flexbox; position: absolute; bottom: 37px; left: 0; } .slider1 .owl-dots .owl-dot { display: inline-flex; display: -webkit-inline-box; display: ms-inline-flex; display: -ms-inline-flexbox; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; background: #eef6f9; } .slider1 .owl-dots .owl-dot.active { background: #eb2b63; } <div class="col-lg-6"> <div class="slider1 owl-carousel"> <div class="slider-content"> <div class="slider-item set-bg" data-setbg="https://via.placeholder.com/600x400"> </div> </div> <div class="slider-content"> <div class="slider-item set-bg" data-setbg="https://via.placeholder.com/600x400/ff0000"> </div> </div> </div> </div>