WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

スライドショーが作れるjQueryプラグインbxSlider

f:id:mmmmofu:20160814194041p:plain

デモはこちら

http://efu.sakura.ne.jp/web/bxslider/


サイトからファイルをダウンロードする。

bxslider.com

jquery.bxslider.min.jsと
jquery.bxslider.cssを任意のフォルダに入れ、
新規ファイルに指定を書く

CSSを自分で記入する場合はCSSファイルが無くても良い。

スライドする写真をulでマークアップする
ulにクラスbxslider(任意)を設定する
ulをdivで囲いクラス名sliderを設定する

bxSliderを呼び出すjQueryを記述する。
(サイトのHow to installを参照)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>bxSlider</title>
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  <style>
    .slider {
      width: 980px;
      margin: 50px auto 0;
    }
    .bxslider li img {
      width: 100%;
      height: auto;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="js/jquery.bxslider.js"></script>
  <script>
$(function(){
  $('.bxslider').bxSlider({//$()の中はulにつけたクラス名
  auto: true,
   autoControls: true
 });
});
</script>
</head>
<body>
  <div class="slider">
    <ul class="bxslider">
      <li><img src="img/01.jpg" height="770" width="1200" alt=""></li>
      <li><img src="img/02.jpg" height="770" width="1200" alt=""></li>
      <li><img src="img/03.jpg" height="770" width="1200" alt=""></li>
      <li><img src="img/04.jpg" height="770" width="1200" alt=""></li>
    </ul>
  </div>
</body>
</html>

オプション

オプション デフォルト 説明
mode 'horizontal', 'vertical', 'fade' 'horizontal' スライダーのモードを選ぶhorizontal(横スライド)vertical(縦スライド)fade(フェード)
auto true / false false 一定時間後オートでスライド、フェードするか否か

bxslider.com

コントロール操作をした後にオート再生が止まってしまうのを対処

$(function(){
  var slider = $('.bxslider').bxSlider({//$()の中はulにつけたクラス名
  auto: true,
   autoControls: true,
    onSlideAfter: function(){
      slider.startAuto();
    }
 });
});