Qwl-Carousel 在 owl-dots 下方显示线条答案

【问题标题】：Qwl-Carousel displays line below owl-dotsQwl-Carousel 在 owl-dots 下方显示线条
【发布时间】：2021-08-29 16:23:10
【问题描述】：

伙计们。我在显示旋转木马刷卡器时遇到了一些问题。我不知道为什么轮播 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

【问题讨论】：

您的代码没有任何线条或边框。您必须在您正在使用的网站上的 css 文件中查找问题，或者提供 url - 问题所在。
@AleksandrAbramov 你是对的。我的头 css 文件中有问题，我已经修复了。感谢您的回复！

标签： javascript html css owl-carousel

【解决方案1】：

header.css

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

问题在于为导航栏中的活动项目设置的背景颜色。所以我评论它以使该行消失。

【讨论】：