删除 bxslider 幻灯片周围的边框

Question

我正在使用 jquery bx 滑块。我想删除幻灯片周围的边框。我该怎么做呢？我试过了，但没用：

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

还有其他方法吗？

Answer 1

"box-shadow" 未设置为 ul 而是设置为父级 (".bx-wrapper .bx-viewport")，删除 "box-shadow"。你也有 5px 宽度的边框，但颜色是白色 (#fff) 所以选择你需要的或不需要的。

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

Answer 2

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

Answer 3

如果您查看呈现的样式 bxSlider，您会看到包装器 <div class="bx-wrapper" style="max-width: 1100px;"> 并且阴影由 bx-wrapper class。所以你可以通过覆盖这个 class.

来隐藏阴影它

以前的解决方案对我不起作用。当我将 !important 添加到样式时它起作用了：

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

Answer 4

由于接受的答案不再正确（2018 年 - bxSlider v4.2.12），我在此处添加工作 CSS:

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

!important 不是必需的，如果您在链接到 bxSlider 的 CSS 文件后添加此 CSS。

Answer 5

对我来说唯一可行的解决方案是更改包装器 class:

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

来自文档： wrapperClass 是具有默认值 'bx-wrapper'.

的字符串

wrapperClass - Class 将滑块包裹起来。更改以防止使用默认的 bxSlider 样式。

删除 bxslider 幻灯片周围的边框

remove border around bxslider slides

css

jquery

bxslider