JQueryプラグインの使い方

1. jQueryプラグインを使ってみましょう
jQuery（JavaScriptライブラリ）
＋
jQueryプラグイン
更にすごいことが
簡単にできる

2. http://bxslider.com/
jQueryプラグイン【bxSlider】で
写真をスライドしましょう

3. プラグイン使用方法
①サイトを見てHTMLを記述します
<ul class="bxslider">
<li><img src="images/slide1.jpg" alt=“"/></li>
<li><img src="images/slide2.jpg" alt=“"/></li>
<li><img src="images/slide3.jpg" alt=“"/></li>
</ul>

4. プラグイン使用方法
②配布サイトからダウンロードする
＊何が必要かはサイトに書いてある
③ダウンロードしたファイルを各フォルダへ
.js ⇨ jsフォルダへ
.css ⇨ cssフォルダへ
画像 ⇨ imagesフォルダへ

5. プラグイン使用方法
<link href="css/jquery.bxslider.css" rel="stylesheet">
④ダウンロードした cssをhtmlに読み込む

6. プラグイン使用方法
<script src=”https://ajax.googleapis.com/
ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
（jQueryライブラリと一緒にhtmlページに読み込む）
⑤ダウンロードした js をhtmlに読み込む

7. プラグイン使用方法
//bxsliderスライドショー
<script>
$(function() {
$('.bxslider').bxSlider();
});
</script>
⑥プラグインを読み出す記述を書く
＊記述方法はサイトに書いてあリます

8. オプション記述方法
<script>
$(function() {
$('.bxslider').bxSlider({
auto:true,
mode:'fade’
});
});
</script>
$(‘.bxslider’).bxSlider();
の()の中に書きます
,カンマ
最後は
カンマ無し

9. <link href="css/jquery.bxslider.css" rel="stylesheet">
<ul class="bxslider">
<li><img src="images/slide1.jpg" alt=“"/></li>
<li><img src="images/slide2.jpg" alt=“"/></li>
<li><img src="images/slide3.jpg" alt=“"/></li>
</ul>
<script src=”https://ajax.googleapis.com/
ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
//bxsliderスライドショー
<script>
$(function() {
$('.bxslider').bxSlider();
});
</script>
bxslider 記述まとめ
プラグインjs
プラグイン実行
プラグインcss
jQuery本体