menu

Creative Demos

bxsliderをブラウザ幅いっぱいに表示する。

  • 2枚目以降の画像もブラウザの幅全体に表示。
  • コントローラー(next/prev)クリック後に自動再生をする。

html

  • 画像の幅と高さを指定
            <div id="image-bloc">
              <ul class="slider">
                <li class="slide"><img src="../img/01.jpg" width="800" height="400" alt=""></li>
                <li class="slide"><img src="../img/02.jpg" width="800" height="400" alt=""></li>
                <li class="slide"><img src="../img/03.jpg" width="800" height="400" alt=""></li>
                <li class="slide"><img src="../img/04.jpg" width="800" height="400" alt=""></li>
                <li class="slide"><img src="../img/05.jpg" width="800" height="400" alt=""></li>
                <li class="slide"><img src="../img/06.jpg" width="800" height="400" alt=""></li>
                <li class="slide"><img src="../img/07.jpg" width="800" height="400" alt=""></li>
              </ul>
            </div>
              

CSS

  • #image-bloc:高さを固定
  • .bx-viewport:幅を親要素の幅に指定※画像のサイズに合わせてしまうと末尾のクローンが下に回り込みレイアウトが崩れます
  • .bx-viewport:非表示になっている2枚目以降の画像をoverflow:visible!importantで再表示
  • .main-container:これを指定しないとブラウザ最下部にスクロールバーが出てしまうのでoverflow:hiddenで解除
              #image-bloc {
                height: 440px;
              }

              .bx-viewport {
                overflow: visible!important;
                width: 1026px!important;
              }

              .main-container {
                overflow: hidden;
                padding-bottom: 150px;
              }

              .slider {
                list-style: none;
                margin: 0;
                padding: 0;
              }

              .slider li {
                width: 800px!important;
                margin: 0;
                padding: 0;
              }
              

javascript

  • コントロールクリック後の自動再生※デフォルトでは停止のままになります
  • slidewidthを画像サイズに指定※shadowを含めたサイズが好ましいです
  • あとは好きなオプションをご自由に
            $(document).ready(function() {
                var obj = $('.slider').bxSlider({ // 自動再生
                  auto: true,
                  infiniteLoop: true,
                  responsive: false,
                  speed: 1000,
                  displaySlideQty: 1,
                  pager: true,
                  slideWidth: 810, // 画像のサイズ
                  minSlides: 1,
                  maxSlides: 1,
                  moveSlides: 1,
                  slideMargin: 30,
                  pause: 4000,
                  onSlideAfter: function() { // 自動再生
                    obj.startAuto();
                }
              });
            });
              

bxslider

http://bxslider.com/