移除bxslider幻灯片周围的边框

Question

我正在使用jQuery bx slider插件。我想要移除幻灯片周围的边框。 我该怎么做？ 我尝试了以下方法，但没有成功：

```css .bx-wrapper .bx-viewport { border: none; } ```

ul.bxslider {
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
  box-shadow: 0;
  border: none;
}

还有其他的方法吗？

- arximughal

Answer 1

由于被接受的答案已经不正确了（在2018年 - bxSlider v4.2.12），我在这里添加了有效的CSS：

.bx-wrapper {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
}

如果在链接到bxSlider的CSS文件后添加此CSS代码，则不需要使用!important。

- Legionar

Answer 2

我的唯一有效解决方案是更改包装类：

slider.bxSlider({
    wrapperClass: 'your-class-here'
});

来自文档：

wrapperClass 是一个字符串，其默认值为 'bx-wrapper'。

wrapperClass - 用于包装滑块的类。更改此类可避免使用默认的 bxSlider 样式。

- Zhulian Atanasov

Answer 3

“box-shadow”并未设置在“ul”上，而是设置在父元素（“.bx-wrapper .bx-viewport”）上，请移除“box-shadow”。此外，你的边框宽度为5像素，但颜色为白色（#fff），因此可以根据需要选择是否保留。

.bx-wrapper .bx-viewport
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

- Eran.E

---

无法在2018年工作，bxSlider v4.2.12，添加的解决方案适用于2018年。 - Legionar

Answer 4

.bx-viewport {
    position: static!important; /* center to page correctly */
    border: 0!important; /* border */
    -webkit-box-shadow: none!important; /* these two shadows */
    box-shadow: none!important;
}

- cizi

---

尽管这段代码块可能回答了问题，但最好您能提供一点解释为什么它可以做到这一点。 - Rakete1111

无法在2018年工作，bxSlider v4.2.12，添加的解决方案适用于2018年。 - Legionar

Answer 5

如果您查看渲染的bxSlider样式，您将看到包装器<div class="bx-wrapper" style="max-width: 1100px;">，并且阴影是由bx-wrapper类设置的。因此，您可以通过覆盖此类来隐藏阴影。

之前的解决方案对我没有用。当我在样式中添加!important时它才起作用：

.bx-wrapper {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

- valex

---

无法在2018年工作，bxSlider v4.2.12，添加的解决方案适用于2018年。 - Legionar