汎用性の高いスライドショープラグイン「SlidesJS」

cinema-64154_1280

ハイ! リサです。

今年に入って何ヶ月も費やしたHPの制作がやっと終わったので、少しホッとしたところです。
そのHPで使ったスライドショーのjQueryプラグインが使いやすかったので紹介しておきます。

スポンサーリンク
スポンサーリンク

SlidesJS

このスライドショープラグインはイメージを設置するだけで、各スライドのナビゲーションボタンが自動配置されます。
そのためメンテナンス性が非常に高く、スライドイメージの入れ替えや追加が容易に行えます。

以下がプラグインのサイト。

slidesjs

出典:SlidesJS

※ダウンロードも上記のリンクからです。

基本的な設置

設置も簡単です。

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でくくって画像リンクも簡単にできます。

とてもシンプルなプラグインですので、おすすめです。

使ってみてね。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする