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;}