備忘録

トップページで複数毎のバナーを数秒毎に横スクロールするスライドバナー。

サイズやサムネイルの設置により、フォトフレームとして活用可能。

bxSliderのjsファイルをダウンロードし、読み込む。

<script src="/js/jquery.bxslider.min.js"></script>

表示する場所に設定する。

【javascript】

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

 

【css】

<style type="text/css">
  #image-bloc {
    height: 270px; 
  }
  .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;
  }
  .slide_banner {
    overflow: hidden;
  }
</style>

 

【html】

<div class="slide_banner">
  <div id="image-bloc">
    <ul class="slider">
      <li class="slide"><img src="<?php echo bloginfo('template_url'); ?>/img/slide1.jpg" /></li
      <li class="slide"><img src="<?php echo bloginfo('template_url'); ?>/img/slide2.jpg" /></li
      <li class="slide"><img src="<?php echo bloginfo('template_url'); ?>/img/slide3.jpg" /></li
      <li class="slide"><img src="<?php echo bloginfo('template_url'); ?>/img/slide4.jpg" /></li
    </ul>
  </div>
</div>