DEMO bxslider
bxsliderのデモ
JS(ヘッダー)
<link rel="stylesheet" href="/css/jquery.bxslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>
JS(オプション)
<script> $(document).ready(function(){ $('.slider').bxSlider({ mode: 'fade', //スライド時のアニメーション captions: true, //キャプションを表示する auto: true, //自動再生 }); }); </script>
html
<ul class="slider"> <li><img title="シーサー" src="o_004_s.jpg" alt="o_004_s" width="450" height="300" /></li> <li><img title="沖縄の小径" src="o_006_s.jpg" alt="o_006_s" width="450" height="300" /></li> <li><img title="沖縄の海辺" src="o_015_s.jpg" alt="o_015_s" width="450" height="300" /></li> <li><img title="やどかり" src="o_037_s.jpg" alt="o_037_s" width="450" height="300" /></li> </ul>