删除边界bxslider幻灯片

Question

我正在使用jquery bx滑块。我想删除幻灯片的边框。 我该怎么做？ 我想这一点，但没有奏效：

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

任何其他的方式来做到这一点？

Answer 1

作为公认的答案是没有更正确的（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 2

“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 3

.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 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是字符串，默认值为“BX-包装”。

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