刪除邊界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樣式。