如何向bxSlider中的元素正確添加邊距

目標：具有可滑動DIV的滑塊，元素之間必須有空隙。如何向bxSlider中的元素正確添加邊距

問題：我有6張幻燈片（DIV），他們應該看這個：http://cl.ly/image/3t2Q0w1N350y（這個不是很準確的例子，因爲左側幻燈片中的圖像被剪下了大約15個像素，但我希望它能給出一個想法需要什麼來實現）

我使用代碼從bxslider網站的示例頁面：

$(function(){ 
$('#slider1').bxSlider({ 
displaySlideQty: 3, 
moveSlideQty: 1, 
prevText: "", 
prevSelector: '#backar', 
prevImage: '/img/siteicons/slider-left-arrow.png', 
nextText: "", 
nextSelector: '#forwar', 
nextImage: '/img/siteicons/slider-right-arrow.png' 
}); 
});

正如我所說的幻燈片需要有元素，因此我加保證金的權利之間的差距：20像素; .element 但結果很奇怪... 現在元素之間存在差距，但元素本身在幾圈之後不能正確顯示。（例如：http://cl.ly/image/3J0O2e360N1m）

所以我的問題是：如何正確添加margin/padding（無論）到滑塊中的元素？我不確定這個問題與CSS或JS有關，但我希望有人知道解決方案。我試着添加固定數量而不是getWrapperWidth（）;我試圖添加固定數量，而不是getWrapperWidth（）;我試圖添加固定數量而不是getWrapperWidth（）;我試圖添加固定數量而不是getWrapperWidth（）;我試圖添加固定數量而不是getWrapperWidth（）。 wrapperWidth =在bxSlider代碼中。但沒有運氣。

我的測試頁：http://restop.cutepictures.ru/htmlmockup/test.html

來源

2012-10-05 user1327

沒有邊距，沒有填充物。你想擁有在bxSlider元件之間的間隙 -

.element{ 
float: left; 
width: 225px; 
max-width: 225px; 
max-height: 210px; 
}

順便說一句我還設置固定的寬度增加額外的寬度到您的DIV /李（你的「滑動元件」）等

在我的情況下wrapperWidth在滑塊js

來源

2012-10-06 11:15:15 user1327

的問題是你的滑塊工具使用.element的div的寬度來確定，當您單擊箭頭滑動什麼距離。換句話說，擺脫利潤率右上.element DIV

.element { 
    float: left; 
    max-height: 210px; 
    max-width: 210px; 
    width: 210px; 
}

並添加浸軋到您的圖像

img { 
    border: 0 none; 
    padding-right: 10px; 
}

隨着有點擺弄我想你能得到這看看你想要它。

來源

2012-10-05 20:40:40 Number1SuperGuy

謝謝你的回答，但我發現了更簡單的方法來實現我所需要的 - 爲.element添加額外的寬度 – user1327

如何向bxSlider中的元素正確添加邊距

回答

相關問題