読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

jQueryプラグイン①bxSlider導入方法

jQuery

今回はbxSliderをつかったスライドの作り方に着いて勉強しました。

bxSlider導入方法

1.まず[bxSlider](http://bxslider.com/)のサイトに行き、ダウンロードします。

2.「jquery.bxslider.zip」がダウンロードできるので解答し、
フォルダ内にある「jquery.bxslider.min.js」と「jquery. bxslider.css」を読み込みます。

<link rel=""stylesheet href="パス名/
 <span style="color:red;">jquery.bxslider.css</span>">

<script src="パス名/jquery.bxslider.min.js">

ここでどのバージョンのjQueryを読み込むかですが、 最新のjQuery 3.xでは画像が読み込み待ちの状態になってしまいます。

jQuery 2.xやjQuery 1.xなら正常に動く様です。

bxSliderのメソッド

下記の用に記述していきます。

<script>
 $(document).ready(function(){
  $('.bxslider').bxSlider({
   ここにメソッドを記述
  });
 });
</script>

メソッドの種類

mode: ‘vertical’
(縦スライドにスライドしていく)
mode: ‘fade’
(画像が徐々に変わる)
mode: ‘horizontal’
(横にスライドしていく。)
speed: ‘1000’
(スライドの速さ)
slideMargin: ‘50’
(スライド間のマージン)
startSlide: ‘1’
(どのスライドから表示するか。最初のスライドを0から数えます。)
randomStart: true
(ランダムで最初のスライドを表示。falseで解除)
infiniteLoop: true
(スライドの無限ループ。falseで解除。)
hideControlOnEnd: true
(スライドが最初のときや最後のときに次へいくボタンや戻るボタンを隠す。)
captions: true
(キャプションを表示する。)
画像のtitle属性に表示したいキャプションを記述。
<script>
 $(document).ready(function(){
  $(‘.bxslider’).bxSlider({
   captions: true
  });
 });
</script>
<ul class="bxslider">
    <li><img src="./images/sample1.jpg" title="キャプション1"></li>
    <li><img src="./images/sample2.jpg" title="キャプション2"></li>
    <li><img src="./images/sample3.jpg" title="キャプション3"></li>
    <li><img src="./images/sample4.jpg" title="キャプション4"></li>
</ul>
ticker: true
(自動で途切れなくスライドし続ける。)
pager: false
(スライド下のページャーを非表示。falseで表示。)
controls: false
(次へ行くボタンや戻るボタンを非表示。trueで表示。)
自動でスライドさせ、秒数を指定。
<script>
 $(document).ready(function(){
  $(‘.bxslider’).bxSlider({
   auto: true,
 pause: 2000
  });
 });
</script>
<ul class="bxslider">
    <li><img src="./images/sample1.jpg" title="キャプション1"></li>
    <li><img src="./images/sample2.jpg" title="キャプション2"></li>
    <li><img src="./images/sample3.jpg" title="キャプション3"></li>
    <li><img src="./images/sample4.jpg" title="キャプション4"></li>
</ul>
slideWidth(スライドの幅)maxSlides(最大表示数)minSlides(最小表示数)moveSlides(移動するスライドの数)
<script>
 $(document).ready(function(){
  $(‘.bxslider’).bxSlider({
  slideWidth: 200,
    maxSlides: 3,
    minSlides: 3
   moveSlides: 2
  });
 });
</script>