无法去除bxSlider周围白色边框问题求助

问题描述 #

我正尝试去除bxSlider滑块周围的5px白色实线边框，已经试过在CSS里设置border:0 !important、JS配置里加outline:0，还试过box-sizing:border-box和box-shadow:none，但边框依然存在。

我的现有代码如下：

CSS代码

#wrapper {
    width: auto;
    margin: 70px 0px;
    padding: 0px;
    background-color: #d8d2d2;
}

a.slide {
    width: 100%;
}

#bxSlider {
    background-color: #d8d2d2;
    border:0 !important;
}

JS代码

$('.bxSlider').bxSlider({
    mode: 'vertical',
    speed: 500,
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    nextText: '<i class="fa fa-angle-right" style="color:black; font-size:42px"/> </i>',  
    prevText: '<i class="fa fa-angle-left" style="color:black; font-size:42px"/> &nbsp; </i>',    
    slideMargin: 0,
    infiniteLoop: true,
    pager: false,
    outline: 0,  
    minSlides: 3,
    maxSlides:3,
    moveSlides: 3,
    adaptiveHeight: false,
    slideSelector: 'a.slide'
});

解决方案 #

bxSlider初始化后会自动生成额外的DOM结构，你之前的样式没覆盖到核心的视口容器，试试下面的方法：

• 覆盖自动生成的.bx-viewport容器样式（这是滑块的核心视口，默认可能带边框）：

.bx-viewport {
  border: 0 !important;
}

• 额外清除滑块内部列表的默认样式，避免潜在的边框/边距影响：

.bxSlider ul {
  border: none;
  margin: 0;
  padding: 0;
}

• 若仍有视觉上的"边框"，检查是否是padding导致，清除相关容器的padding：

#bxSlider, .bx-viewport {
  padding: 0 !important;
}

原理说明 #

bxSlider会给滑块内容套上一个.bx-viewport的容器，这个容器的默认样式里通常带有边框，你之前仅针对自己定义的#bxSlider设置样式，没覆盖到这个自动生成的类，所以边框无法去除。

内容的提问来源于stack exchange，提问作者Richard Larson