6

非常にシンプルでシームレスにループするカルーセルを作成したいと考えており、bxSlider を使用してみましたが、画像が中心からずれているという問題が発生しています。

私は 3 x 1000px 幅の画像を持っています。私がやりたいことは、アクティブな画像がブラウザーの中央にあり、他の 2 つの画像が左側/右側で無限にループしていることを確認することだけです。

ここに画像の説明を入力

負のマージンのトリック (left: 50%およびmargin-left: -500px) を使用してみましたが、うまくいかず、bxSlider はおかしくなりました。

私のコードは非常にシンプルで、ここにフィドルがあります: http://jsfiddle.net/j3hgA/

<ul class="bxslider">
    <li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
    <li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
    <li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>

これを行うより良い方法はありますか？

4

4 に答える 4

7

これはあなたが必要とするものです..

デモ:- http://jsfiddle.net/dush88gs/rj9r74a0/41/


完全なコードはこちら

HTML

<head>
  <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/>  
</head>

<body>
    <div class="bxslider">
      <div class="slide"><img src="images/1.jpg" width="1000" /></div>
      <div class="slide"><img src="images/2.jpg" width="1000" /></div>
      <div class="slide"><img src="images/3.jpg" width="1000" /></div>
      <div class="slide"><img src="images/4.jpg" width="1000" /></div>
      <div class="slide"><img src="images/5.jpg" width="1000" /></div>
      <div class="slide"><img src="images/6.jpg" width="1000" /></div>
    </div>

    <!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>

<script>
    $(document).ready(function(){
      $('.bxslider').bxSlider({
        slideWidth: 900,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        pager: false,
        auto: true
      });
    });
</script>
</body>

CSS

div.bxslider {
    margin-left: 25%;
    margin-right: 25%;
}
于 2015-07-30T11:53:43.200 に答える
2

スライダーを中央に配置するには、カルーセルをコンテナーに含める必要があるため、スライダーをコンテナーに挿入します...

HTML:-

<div class="slide-contain">
<ul class="bxslider">
    <li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
    <li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
    <li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>
</div>

CSS:-

.slide-contain { margin: 0 auto; width:1000px; }

無限ループの場合は、パラメーターを挿入してスライダーを機能させる必要があります...

JS:-

$("#slider").bxSlider({
    moveSlides: 1,
    displaySlideQty: 2,
    responsive: false,
    infiniteLoop: true
});

以下の答えのように...

デモ:- http://jsfiddle.net/j3hgA/2/show/

ありがとう、それがうまくいくことを願っています...

于 2013-11-07T04:59:21.530 に答える
0

これは「単純な」CSS の問題でした。

メインの 3 × 1000 ピクセル幅のスライドに加えて、 bxSlider.bx-wrapperがカルーセルの左右に生成する 2 × 1000 ピクセル幅の「オーバーフロー」スライドに対応するために、カルーセルを幅 5000 ピクセルに設定して、「シームレス」効果を実現します。

したがってmargin-left: -2500px; left: 50%;、カルーセルのメイン ラッパー div を使用する必要がありました。つまり、1 つの画像だけでなく、カルーセル全体の合計幅の半分の左マージンです。

したがって、最終的な CSS は次のようになります。

#slideshow-wrapper {
    width: 1000px;        /* Width of single slide */
    margin-left: -2500px; /* Half of total carousel width including overflow images */
    left: 50%;
}

#slideshow-wrapper .bx-wrapper {
    width: 5000px !important; /* Total width including overflow images */
    margin: 0 auto;
    position: relative;
}

最後に、スライダーがループするたびに、スライダーの右側に「白いフラッシュ」または「ポップイン」が表示されました。これは、bxSlider のdisplaySlideQtyオプションを設定していなかったことが原因でした。このオプションは、画面上にいつでも表示できるスライドの数を決定します。

デフォルトdisplaySlideQtyは 1 ですが、私の場合、実際には 3 つの画像の一部がビューポートに表示されていたため、bxSlider は左右の「オーバーフロー」または「シームレス」画像を適切なタイミングで事前レンダリングしていませんでした。3 に変更displaySlideQtyするとうまくいき、スライドショーは無限にループします。

$("#slider").bxSlider({
    moveSlides: 1,
    displaySlideQty: 2,
    responsive: false,
    infiniteLoop: true
});
于 2013-11-07T04:42:43.593 に答える
0

多分これはあなたが必要とするものです..

http://jsfiddle.net/j3hgA/1/

body {
    overflow: hidden;
}

ul {
    position: absolute;
    list-style: none;
    width: 3000px;
    left: 50%;
    margin-left: -1500px;
}

li {
    float: left;
    width: 1000px;
}
于 2013-11-05T08:14:31.413 に答える