トップページ等でスライダーを導入したいとき検索してもいろいろ出てきて、どれがいいと?ってなると思います。
最近、導入してみてこれはよかやんって思ったんでひとつご紹介します。
jquery 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くらいの時
導入してみてたらどうでしょうか