0

目標: DIV をスライドする機能を備えたスライダーを用意します。要素には互いにギャップが必要です。

問題: 6 つのスライド (DIV) があり、次のようになります: http://cl.ly/image/3t2Q0w1N350y (左のスライドの画像が約 15 ピクセルカットされているため、これは正確な例ではありません。これにより、何を達成する必要があるかがわかります。)

bxslider Web サイトのサンプル ページのコードを使用します。

$(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'
 });
});

前述したように、スライドには要素間にギャップが必要なので、margin-right: 20px; を追加しました。.element に変更しましたが、結果は非常に奇妙なものでした... エレメント間に隙間ができましたが、数ターン後にエレメント自体が正しく表示されません。(例: http://cl.ly/image/3J0O2e360N1m )

私の質問は、スライダーの要素にマージン/パディング(何でも)を適切に追加する方法ですか? この質問がCSSまたはJSに関連しているかどうかはわかりませんが、誰かが解決策を知っていることを願っています.

別のマージン/パディングを試しました。また、getWrapperWidth(); の代わりに固定数を追加しようとしました。bxSlider コードの wrapperWidth = に。しかし、運が悪い。

私のテストページ: http://restop.cutepictures.ru/htmlmockup/test.html

4

2 に答える 2

1

マージンなし、パディングなし。bxSlider の要素間にギャップが必要です。DIV/li (「スライド要素」) などに幅を追加します。

私の場合

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

ところで、スライダーjsのwrapperWidthに固定幅も設定しました

于 2012-10-06T11:15:15.417 に答える
0

問題は、スライダー ツールが .element div の幅を使用して、矢印をクリックしたときにスライドする距離を決定していることです。つまり、.element div の margin-right を削除します。

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

画像に右パディングを追加します

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

少し手を加えるだけで、思い通りに見えるようになると思います。

于 2012-10-05T20:40:40.930 に答える