jQuery005　スライダー「bxSlider」 - ねこきっくぱんちのメモ帳

プラグイン「bxSlider」

f:id:neko_kick_panch:20170605231058p:plain

■インストール（公式抜粋）
Step 1: Link required files
　→HTMLでjQuery,bxsliderjs,cssを読み込み
Step 2: Create HTML markup
　→スライドさせたいイメージをマークアップ。
Step 3: Call the bxSlider
　→.bxsliderクラスに対してsliderを呼び出し

■ポイント
・所定のディレクトリに必要なものだけ配置
・imgのパスをディレクトリ構成に合わせて置換
　※minファイルを利用せずカスタマイズする場合
・記述ミスによる各ファイルのinclude失敗に注意
・動作指定オプションは多数あるため、こちらもサイトに合わせてカスタマイズ

■
html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxslider</title>
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script src="js/script.js"></script>
</head>

<body>
<header>
<h1>bxSlider</h1>
<p>sliderの学習</p>
</header>
<div class="container">
<ul class="bxslider">
  <li><img src="img/bxslider1.jpg"></li>
  <li><img src="img/bxslider2.jpg"></li>
  <li><img src="img/bxslider3.jpg"></li>
  <li><img src="img/bxslider4.jpg"></li>
</ul>
</div>
</body>

</html>

$(document).ready(function(){
  $('.bxslider').bxSlider({

//自動でスライドする設定
    //auto: true,
    //autoControls: true,
//表示エフェクトの指定
    mode:'fade',
//スライドの速度指定
    speed: 1000,
//下にある点をこれで表示/非表示
    //pager: true, 
//左右の矢印の表示/非表示。初期値はtrue;
    //controls: true,
});
});

■参考
http://bxslider.com/
https://hozunomiya.xyz/?p=83
http://on-ze.com/archives/1658