Question

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

＆＃13;

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

＆＃13;

还有其他方法吗？

Answer 1

＆＃34; box-shadow＆＃34;未设置为ul但设置为父级（＆＃34; .bx-wrapper .bx-viewport＆＃34;），删除＆＃34; box-shadow＆＃34;。你也有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

由于接受的答案不再正确（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。

Answer 4

如果查看渲染的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;
}

Answer 5

对我来说，唯一可行的解决方案是更改包装类：

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

从文档中： wrapperClass是字符串，默认值为＆＃39; bx-wrapper＆＃39;。

wrapperClass - 用于包装滑块的类。更改以防止使用默认的bxSlider样式。

删除bxslider幻灯片周围的边框

5 个答案: