jQueryを使ったスライダー:bxslider:覚書

お仕事

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>

 

タイトルとURLをコピーしました