今年に入って何ヶ月も費やしたHPの制作がやっと終わったので、少しホッとしたところです。
そのHPで使ったスライドショーのjQueryプラグインが使いやすかったので紹介しておきます。
SlidesJS
このスライドショープラグインはイメージを設置するだけで、各スライドのナビゲーションボタンが自動配置されます。
そのためメンテナンス性が非常に高く、スライドイメージの入れ替えや追加が容易に行えます。
以下がプラグインのサイト。
出典：SlidesJS（slidesjs.com）
※ダウンロードも上記のリンクからです。
基本的な設置
設置も簡単です。
head部
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$(".slides").slidesjs({
width: 933,
height: 301,
play: {
active: false,
interval: 5000,
auto: true
}
});
});
</script>
ブラウザーの幅を「$(window).width()」で判定し、上記の設定で画像サイズを変更すれば、レスポンシブでも使用可能です。
body部
<ul class="slides"> <li><img src="image01.jpg" alt="image"></li> <li><img src="image02.jpg" alt="image"></li> <li><img src="image03.jpg" alt="image"></li> </ul>
liでくくって画像リンクも簡単にできます。
とてもシンプルなプラグインですので、おすすめです。
by T.Y.