tipo. Tengo un problema al mostrar el deslizador del carrusel. No sé por qué la identificación del deslizador del carrusel muestra la línea debajo de los puntos .owl

Intenté editar los "puntos: falso" en js y la línea desaparece, pero cuando configuro "puntos: verdadero", la línea vuelve a aparecer.

¿Puede alguien ayudarme a solucionar este problema?

Aquí está el código.

Código HTML

 <div class="owl-carousel owl-theme row text-cente"> {% for getdata in furniture|slice:"12" %} <div class="col"> <a href="{{ getdata.update_view_count_url }}"> <div class="card text-center"> <div class="card-body"> <img src="{{baseUrl}}/{{getdata.furnitureImg}}" alt="" class="mb-3 mx-auto"> <h3 class="card__fName text-uppercase">{{getdata.furnitureName}}</h3> <h2 class="card__fPrice mb-3">${{getdata.unitPrice}}</h2> <a href="{{ getdata.add_to_cart_url }}" class="card__button text-uppercase mb-3"> <i class="uil uil-shopping-cart"></i> Add To Cart </a> </div> </div> </a> </div> {% endfor %}

codigo css

 .owl-theme .owl-dots .owl-dot { outline: none; text-decoration: none !important; } .owl-theme .owl-dots{ outline: none !important; text-decoration: none !important; } .owl-theme .owl-nav .owl-prev, .owl-theme .owl-nav .owl-next{ outline: none; } .owl-theme .owl-nav .owl-prev { font-size: 40px !important; position: absolute; top: 40%; left: -40px; display: block !important; border:0px solid black; } .owl-theme .owl-nav .owl-next { position: absolute; font-size: 40px !important; top: 40%; right: -40px; display: block !important; border:0px solid black; }

codigo js

 <script type="text/javascript"> $('.owl-carousel').owlCarousel({ loop:true, nav:true, dots: true, margin: 10, navText : ['<i class="uil uil-angle-left-b swiper-portfolio-icon"></i>','<i class="uil uil-angle-right-b swiper-portfolio-icon"></i>'], responsive:{ 0:{ items:2 }, 600:{ items:3 }, 1000:{ items:4 } } }); </script>

Salida: deslizador de carrusel con subrayado