3ステップ導入できる手軽さとWEBレスポンシブ対応がすんごくいい！jquery スライダーのbxSliderがすげぇ！

トップページ等でスライダーを導入したいとき検索してもいろいろ出てきて、どれがいいと？ってなると思います。

最近、導入してみてこれはよかやんって思ったんでひとつご紹介します。

jquery bxSlider

元サイト：bxSlider

bxSlider

このスライダーの特徴は導入コードが少ないことです。3ステップ導入できる手軽さとWEBレスポンシブ対応なのでこれから導入回数は増えていきそうです。

Step 1: Link required files

<!-- 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.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step 3: Call the bxSlider

$(document).ready(function(){
  $('.bxslider').bxSlider({
	auto: true,
	mode: 'fade'
  });
});

横幅360pxくらいの時

bxSlider

導入してみてたらどうでしょうか

Related articles