Published 3月 21st, 2012 by

カルーセルスライダーbxSlider

webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。

プラグインのダウンロードはこちらから 

jQuery content slider carousel image slideshow | bxSlider

こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。

まずはDEMOをご覧下さい

DEMO

基本的な使い方としては、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.bxSlider.js'></script>

を読み込み、head部分の箇所に

<script type="text/javascript">
  $(document).ready(function(){
    $('#slider').bxSlider();
  });
</script>

でOKです。

後ほどでてきますが、イージング効果を使用したい場合、

さらに、

<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>

を読み込む必要があります。

基本的なHTMLは、

<ul id="slider1">
  <li>Slide one content</li>
  <li>Slide two content</li>
  <li>Slide three content</li>
  <li>And so on...</li>
</ul>

だけです。
div要素でも可能なので、
コンテンツ毎動かすことができます。

DEMOの説明をさせていただきます。

1.ページャー、戻る・次へボタン付き

まず、head部分、

Javascript

<script type="text/javascript">
  $(document).ready(function(){
    $('#slider').bxSlider({
		auto: true,  //自動再生
		pause:	5000, //静止時間
		speed: 1000, //エフェクトのスピード
		mode: 'horizontal', //エフェクトの種類
		pager:true, //ページャーの有無
		prevText: '<', //前へのテキスト
		nextText: '>' //次へのテキスト
		});
  });
</script>

切り替わりのエフェクトは全部で、横スライド、縦スライド、フェイドの3パターンしかありません。
しかし、次のイージング効果を使用すればかなりのパターンになります。

2.サムネイルのページャー付き,イージング効果

イージング効果については、
http://gsgd.co.uk/sandbox/jquery/easing/
で動きが見れます。

Javascript

<script type="text/javascript">
 
$(function(){
  // assign the slider to a variable
  var slider = $('#slider2').bxSlider({
		auto: true,
		pause:	5000,
		speed: 1000,
		mode: 'horizontal',
		prevText: '<',
		nextText: '>',
		pager: true,
		easing: 'easeOutBounce', //イージングの効果
　　　　　　　　　//サムネイルの設定
		buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a href="" class="thumb"><img src="sample1.jpg" width="90" /></a>';
        case 1:
          return '<a href="" class="thumb"><img src="sample2.jpg" width="90" /></a>';
        case 2:
          return '<a href="" class="thumb"><img src="sample3.jpg" width="90"  /></a>';
        case 3:
          return '<a href="" class="thumb"><img src="sample4.jpg" width="90"  /></a>';
      }
    }
		});


});
</script>

3.カルーセルスライダー

Javascript

<script type="text/javascript">
  $(document).ready(function(){
    $('#slider3').bxSlider({
		auto: true,
		pause:	5000,
		speed: 1000,
		pager: true,
		displaySlideQty: 3, //一画面に表示する数
		moveSlideQty: 1, //移動時にずれる数
		prevText: '<',
		nextText: '>'
		});
  });
</script>

ここで気をつけたいのは、

カルーセルの横幅が、
displaySlideQtyで設定した数値×liの要素のwidthを設定した数値

になることです。

デモでは、liの要素のwidthを320pxに設定しているので、
960pxになっています。

ですのでカルーセルの場合、CSSで調整が必要になってきそうです。

さらに言うと、下にでてくるページ数はliの数になります。

HTML

<h3>1.ページャー、戻る・次へボタン付き</h3>
<div class="bg_img"><ul id="slider" class="slider">
  <li class="slide1"><a href="">横浜の赤レンガ倉庫</a></li>
  <li class="slide2"><a href="">Title , Link , or Desciption</a></li>
  <li class="slide3"><a href="">Title , Link , or Desciption</a></li>
  <li class="slide4"><a href="">Title , Link , or Desciption</a></li>
</ul></div>
<h3>2.サムネイルのページャー付き,イージング効果</h3>
<div class="bg_img"><ul id="slider2" class="slider">
  <li class="slide1"></li>
  <li class="slide2"></li>
  <li class="slide3"></li>
  <li class="slide4"></li>
</ul></div>
<h3>3.カルーセルスライダー</h3>
<div class="bg_img3"><ul id="slider3" class="slider">
  <li class="slide1"><a href="" class="thumb"><img src="sample1.jpg" width="160" /></a></li>
  <li class="slide2"><a href="" class="thumb"><img src="sample2.jpg" width="160" /></a></li>
  <li class="slide3"><a href="" class="thumb"><img src="sample3.jpg" width="160" /></a></li>
  <li class="slide4"><a href="" class="thumb"><img src="sample4.jpg" width="160" /></a></li>
</ul></div>

css

.bg_img
{
	width: 100%;
        max-width: 960px;
	margin: 0 auto 150px;
}
.bg_img .bx-wrapper
{
	height: 100%;
}
.bx-window
{
	margin-bottom: 10px;
}

#slider li a
{
	padding: 30px 0 0 40px;
	font-size: 24px;
	display: block;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 1px 1px 2px #333333;
}

.slider
{
	width: 100%;
	margin: 0px auto;
}

/* 1.2のスライダー部分 */

.bg_img .slider li
{
	width: 100%;
	background-repeat: no-repeat;
	background-position: left center;
	height: 300px;

}
.bg_img .slider li.slide1
{
	background-image: url(../sample1.jpg);
}
.bg_img .slider li.slide2
{
	background-image: url(../sample2.jpg);
}

.bg_img .slider li.slide3
{
	background-image: url(../sample3.jpg);
}

.bg_img .slider li.slide4
{
	background-image: url(../sample4.jpg);
}
/* ページャー部分 */
.bx-pager
{
	text-align: center;
}

.bx-pager a
{
	margin-right: 10px;
	border: 1px solid #dddddd;
	padding: 3px 5px;
	color: #333333;
	text-decoration: none;
}
.bx-pager a.pager-active
{
	color: #ffffff;
	background-color: #333;
}

/* 前へ、次へのボタン */

.bx-prev,.bx-next
{
	position: absolute;
	font-size: 36px;
	text-decoration: none !important;
	color: #ffffff !important;
	text-shadow: 1px 1px 2px #333333;
}
.bx-prev
{
	left: 10px;
	top: 40%;
}
.bx-next
{
	right: 10px;
	top: 40%;
}
.bx-pager a.thumb
{
	border: none;
	padding:0;
	background-color: none;
	line-height: 0;
	overflow: hidden;
	display: inline-block;
}
.bx-pager a img
{
	border: 1px solid #dddddd;
	padding:0;
	text-decoration: none;
}
.bx-pager a.pager-active img
{
	color: #ffffff;
	border: 1px solid #f00;
}

/* 3.カルーセルスライダー */

.bg_img3 .bx-wrapper
{
	width: inherit;
	margin-bottom: 50px;
}
#slider3 li
{
	width: 320px;
	text-align: center;
}

jQuery