Qwl-Carousel 在owl-点下方显示线

Question

伙计们。显示旋转木马滑动器时我遇到了一些问题。我不知道为什么 carousel swiper id 显示 .owl-dots

下面的线

我试图在 js 中编辑“dots: false”，但该行消失了，但是当我设置“dots: true”时，该行又出现了。

谁能帮我解决这个问题？

这是代码。

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

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

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>

输出： carousel swiper with underline

Answer 1

header.css

.active::after{
   content: '';
   position: absolute;
   /* background-color: red; */ /* happen here*/
   width: 100%;
   height: 2.5px;
   bottom: -.75rem;
   left: 0;
 }

问题是为导航栏中的活动项目设置的背景颜色。所以我评论它让这条线消失。

Qwl-Carousel 在owl-点下方显示线

Qwl-Carousel displays line below owl-dots

javascript

html

css

owl-carousel