浜松市を拠点に静岡県西部にてWeb制作&各種デザイン制作を行っております。SOHOならではの身軽さと適正料金にてお客様の企業価値向上に取り組んでいます。Webサイト制作・管理、カタログ制作、広告デザイン、写真撮影等までお気軽にご相談下さい。



ご依頼/お問い合わせはSkypeでも!
(平日 9:00~18:00 | オンライン時のみ)
---お買い物用---

2012年7月10日

BXSLIDER (jQueryによる画像スライダー)のカスタマイズ

Filed under: Web & Design,備忘録 — Cript @ 10:34 AM

よくある、画像のスライドショー用jQueryのなかから評判が良さそうでシンプルなものをと探したのがBXSLIDER http://bxslider.com/

普通にそのまま設置するのはすごく簡単で、
1:ヘッダに以下のjavascriptを記入




2:html部分を下記のように記入

  • Slide one content
  • Slide two content
  • Slide three content
  • And so on...

以上で完成。
と、簡単なんだけどそのままだと少しそっけないので少しカスタマイズ。

行った内容は・・・以下備忘録
変更したかったところは、NEXT、BACKのボタンを画像で任意の場所に置く。
スタート、ストップの表示の非表示。
スライドスピード、停止時間の調整。カスタマイズのオプションはhttp://bxslider.com/optionsのページに書いてあるんだけど、私の英語力と足りない頭ではどうにも理解が中途半端な気がして試行錯誤。と、言うわけでもしかしたらまちがった方法かもしれないけどとりあえず目的は達成したのでよしとしよう(笑)ヘッダは以下の用に記述

  $(document).ready(function(){
    $('#slider1').bxSlider({
	auto: true,				//自動スライド
        speed: 2000,				//スライドスピード
	pause: 3333,				//停止時間
	nextImage: 'index-img/next.png',	//next部分の画像パス
	prevImage: 'index-img/pre.png'		//prev部分の画像パス
	    });
	});

画像はここで指定。

位置は以下のようにしてHTMLでhrefを記入して場所をCSSで指定するようにする。
以下HTML部分

a hrefの件は配布サイトには無い(?)みたいだけど例文のソースを追いかけていくとこんな感じになってるっぽい。ここでnextやらストップを表示させてるようなので、必要に応じて表示・非表示・位置なんかをCSSで変更。

以下、CSS部分

.bx-wrapper {position: relative;}

.bx-prev { 
position: absolute;
top: 130px;
left: 0px;
width: 31px;
height: 60px;
}
.bx-next {
position: absolute;
top: 130px;
right: 0px;
width: 31px;
height: 60px;
}
.bx-start { display:none;}
.bx-stop { display:none;}

その他のオプションについてはhttp://bxslider.com/optionsにあるので参考に。

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment