汎用性の高いスライドショーを実現するjQueryプラグイン「SlidesJS」

今年に入って何ヶ月も費やした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.

スポンサーリンク