ファイルDLなしに賢威にボックススライダー(bxslider)を設置する

ファイルDLなしに賢威にボックススライダー(bxslider)を設置するメモ

ハトでもわかるボックススライダー設置の原理

ボックススライダーは,製作者が配布しているCSSとjsをサイト内で読み込みこませ、jsにボックススライダー を起動する記述を書き込み、起動します。そのため、

• 自分のサーバー内にボックススライダー データをアップロードして読み込ませる場合
• アップロードせずにデータが公開されているURLを読み込ませる場合（CDN）

の２種類の方法があります。

ーーー

ビギナーの方がやりがちなのが、

１.ボックススライダー のデータの指定方法が間違えている、

ということです。アップロードして読み込ませようとしているのにファイル場所を正しく指定していなかったりします。

そして

２.jsに「対象のCSSにボックススライダー を適応させる」という記載していない

場合などです。

つまりシンプル に考えると、JSとCSSを借りて、出力させていると考えることができます。（なのでコピーして自サイトのCSS/JSに貼り付けても動くとは思います。）

CDNで起動する場合

ボックススライダー でこの部分をコピーしてサイトのhead内に貼り付けます。ダウンロードして使用する場合はこのファイル場所URLを変更します。

次にボックススライダー サイトでは下部に下記を記述してくださいとありますが、

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>

一般的にはサイトにjsファイルがあると思いますのでそちらに記述します。賢威の場合ですと　直下＞js にjsファイルがあります。

    $(document).ready(function(){
      $('.slider').bxSlider();
    });

この記述は日本語で振り仮名をつけるとこんな意味です

    $(サイトコンテンツ).読み込みが始まったら(function(){
      $(‘スライダー’セレクタ).ボックススライダー 起動();
    });

そのためこちらもビギナーの方がやりがちなのですが、セレクタ部分$(‘.slider’)が間違っているということがあります

 $(‘.slider’)の場合、HTML側では　<div class=”slider”>　となっている必要があります。

ボックススライダーのオプションを設定する

ボックススライダーを自動にしたりボタンを非表示にしたりなどのオプションはjsに追加記述することで可能となります。

先ほどのボックススライダーに下記の３点を追加してみます。参考にしたサイトはこちらになります。

• 自動スライド
• スライドスピード
• nextボタン非表示

// ボックススライダー
$(document).ready(function(){
    $('.slider').bxSlider({
 auto: true,//自動スライド
 speed: 2000,//スライドスピード
 controls: false,//ボタンの非表示
});
});