jquery.bxslider の使い方 (v4.1.1)

jquery.bxslider (v4.1.1) デモ(ページャー付き)

2013年06月21日

次のサイトへ行ってjquery.bxsliderをダウンロードしてください。
jQuery Content Slider
jQueryはこちらからダウンロードします。→ jQuery

フォルダはこのような構造になっています。jquery.bxslider.cssとjquery.bxslider.jsを他のフォルダに移す場合は参照先も変わるので注意してください。

フォルダ構造

<head>~</head>間でCSSとJavascriptを読み込む

<link type="text/css" href="jquery.bxslider.css" rel="stylesheet" media="all">
<style type="text/css"><!--
.slide {
width:500px;
margin:10px auto 0 auto;
padding:0px;
}
.bx-custom-pager {
bottom: -30px !important; /* pager 位置調整 */
text-align:center !important;
}
.bx-custom-pager .bx-pager-item {
width:60px !important; /* pager サイズ調整 */
margin:0 1px;
}
.bx-pager-item img {
border:1px solid #ffffff;
}
.bx-pager-item a:hover img,
.bx-pager-item .active img {
border:1px solid #cc0000;
opacity: 0.7;
}
--></style>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.bxslider.js"></script>
<script type="text/javascript">
$(function(){
var obj = $('#slider').bxSlider({
  auto:true,          // true,false
  pause:3000,
  speed:1000,
  controls:false,     // true,false
  captions:false,     // true,false
  pager:true,         // true,false
  mode:'horizontal',  // horizontal,vertical,fade
//  easing:'easeOutBounce', //イージングの効果
buildPager: function(slideIndex){
switch (slideIndex){
case 0:
  return '<img src="images/sample01s.jpg">';   // pager image
case 1:
  return '<img src="images/sample02s.jpg">';
case 2:
  return '<img src="images/sample03s.jpg">';
case 3:
  return '<img src="images/sample04s.jpg">';
case 4:
  return '<img src="images/sample05s.jpg">';
case 5:
  return '<img src="images/sample06s.jpg">';
case 6:
  return '<img src="images/sample07s.jpg">';
case 7:
  return '<img src="images/sample08s.jpg">';
}
},
onSlideAfter: function () { obj.startAuto(); }
});
});
</script>

onSlideAfter: function () { obj.startAuto(); }
pagerをクリックするとスライドが停止するので、これで再度スタートさせています。
それに伴い、
$('.bxslider').bxSlider({ を
var obj = $('#slider').bxSlider({ に変更しています。

<body>~</body>間

<div class="slide">
<ul id="slider">
<li><img src="images/sample01.jpg" title="caption 01"></li>
<li><img src="images/sample02.jpg" title="caption 02"></li>
<li><img src="images/sample03.jpg" title="caption 03"></li>
<li><img src="images/sample04.jpg" title="caption 04"></li>
<li><img src="images/sample05.jpg" title="caption 05"></li>
<li><img src="images/sample06.jpg" title="caption 06"></li>
<li><img src="images/sample07.jpg" title="caption 07"></li>
<li><img src="images/sample08.jpg" title="caption 08"></li>
</ul>
</div><!-- end slide -->

写真の枠が不要なときは、jquery.bxslider.css の
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: solid #fff 5px;
left: -5px;
background: #fff;
}
この設定を削除します。

キャプションの位置などはこの部分です。
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0; /* top,bottom */
left: 0;
background: #666¥9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
text-align:left; /* 項目追加 left,center,right */
}

.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}

画像と文章(テキスト)を動かすサンプルはこちら


ページトップへ ページトップへ

ページトップへ