JAVA / jQuery

【bxSlider】メインビジュアルやその下あたりにあるスライダー（画像やバナーが一定時間ごとに左右にスライドするやつ）【HTML/CSS/JS】【WORDPRESS】

 

①「bxSlider」をダウンロードする

bxSliderの公式サイトからダウンロード。
※右上に「ダウンロード」または「GitHub」ボタンがあるのでクリックしてダウンロードする。

②必要なファイルを取り出してアップロードする

「jquery.bxslider.js」
「jquery.bxslider.css」

上記２つのファイルを「FileZilla」などを使用して、該当サイトのフォルダの中の「wpcontent」⇒「Themes」⇒「…..child（子テーマ）」の中にアップロードする。

③head内に記述

「header.php」の「head内」に、以下を記述。
※これにより「jQuery」「jquery.bxslider.js」「jquery.bxslider.css」を読み込むようになる。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="css/jquery.bxslider.css" />

 

④引き続きhead内に記述

「header.php」の「head内」に、以下を記述。
※「bxSlider」を呼び出すためのjavascriptです。
※$(‘.bxslider’)の中の「.bxlider」は、任意のクラスやIDに変更可能です。

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
  auto: true,//自動切替の有無
  pause:6000,//停止時間※デフォ4000
  speed:1000,//動くスピード※デフォ500
  minSlides: 3,//一度に表示させる画像の最小値
  maxSlides: 4,//一度に表示させる画像の数
  slideWidth: 160,
  slideMargin: 10,
  pager: true,
  prevText: '＜',
  nextText: '＞',
});
});
</script>

 

⑤HTML（参考）

表示させたい任意の場所に書いていきます。

<div id="slide_section">
<ul class="bxslider">
<li><a href="#"><img alt="" src="img/img01.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img02.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img03.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img04.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img05.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img06.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img07.jpg" /></a></li>
</ul>
</div><!-- /#slide_section -->

 

⑥CSS（自由に編集）

WordPressのカスタマイザーに書く場合で、内容変更時に色など変化しない時は「!important」を使用する。

.bx-wrapper {
     position: relative;
     margin: 0 auto 30px;
     padding: 0;
     *zoom: 1;
     height:120px;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
     position: absolute;
     width: 100%;
}

/* Pager */

.bx-wrapper .bx-pager {
     text-align: center;
     font-size: .85em;
     font-family: Arial;
     font-weight: bold;
     color: #666666;
     padding-top: 5px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
     display: inline-block;
     *zoom: 1;
     *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
     background: #d8d8d8;
     text-indent: -9999px;
     display: block;
     width: 10px;
     height: 10px;
     margin: 0 5px;
     outline: 0;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}


.bx-wrapper .bx-pager.bx-default-pager a.active {
     background: #7a7a7a;
}

/*「Nextボタン」「Prevボタン」 */

.bx-wrapper .bx-prev {
     left: -30px;
     padding-left:5px;
}

.bx-wrapper .bx-next {
     right: -30px;
     padding-left:5px;
}

.bx-wrapper .bx-prev:hover {
     background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
     background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
     position: absolute;
     outline: 0;
     width:20px;
     height: 120px;
     top:0;
     text-decoration: none;
     line-height: 120px;
     font-size: 15px;
     color:#999999;
     z-index: 9999;
     background: #dddddd;
}

.bx-wrapper .bx-controls-direction a.disabled {
     display: none;
}

 

※自動再生を停止しない場合

<script>
$(document).ready(function(){
  var obj = $('.bxslider').bxSlider({
  auto: true,//自動切替の有無
  pause:6000,//停止時間※デフォ：4000
  speed:1000,//動くスピード※デフォ：500
  minSlides: 3,
  maxSlides: 4,
  slideWidth: 160,
  slideMargin: 10,
  pager: true,
  prevText: '＜',
  nextText: '＞',
  onSlideAfter: function () { obj.startAuto(); }
});
});
</script>
RELATED POST