bxSlider公式ダウンロードサイトから一式ダウンロードしてはじめます。
ダウンロドしたファイルの中にdistファイル。その中
「jquery.bxslider.js」と「jquery.bxslider.css」が必要。
bxSliderを使う為の最低限の記述
<pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="common/js/jquery.bxSlider.js"></script>
<link rel="stylesheet" href="common/css/jquery.bxslider.css">
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<pre>
上が、htmlのhead内に記述する内容で「jQuery」と「jquery.bxslider.js」と「jquery.bxslider.css」を読み込んだ上で、bxSliderを呼び出す為のjavascriptの記述を書きます。
<script>タグの中で、上記の記述で呼び出して下さい。commonファイルの中への入れ方に注意してください。
HTMLの記述
<pre>
<ul class=”bxslider”>
<li><img src=”img/img01.jpg” title=”キャプション1″></li>
<li><img src=”img/img02.jpg” title=”キャプション2″></li>
<li><img src=”img/img03.jpg” title=”キャプション3″></li>
<li><img src=”img/img04.jpg” title=”キャプション4″></li>
</ul>
</pre>
