BLOG
レスポンシブ対応のイメージスライダープラグイン「ResponsiveSlides.js」
実に手軽で軽量で、レスポンシブデザインにも対応した、
ちょっとしたjQueryイメージスライダーを導入するのにナイスなプラグインをご紹介。
フェードイン・フェードアウトのギミックによる複数枚画像の切り替えをjQueryで行なえます。
切り替わりのスピード調節なんかはオプションで細かく設定できます。
そしてこのプラグインの良いところとしては、レスポンシブレイアウトにも上手いこと対応している、という点です。
イメージスライダープラグインは多種出回っていますが、
僕的には現時点で、このプラグインが一番スッキリしていていいなあ、と感じております。
導入方法は、公式サイトに非常に分かりやすく解説されているのですが、イングリッシュですので、一応手っ取り早く設置解説を。
ちなみに、まる写しですw
まずはヘッダにjquery.js及びresponsiveslides.jsを読み込みます。
<script src="jquery1.10.2.js"></script> <script src="responsiveslides.min.js"></script>
各ソースは公式サイトやGoogle等からDLしてください。
ちなみにjQueryですが、最近2.0が登場しましたがIE8以下対応していないので使用の際はご注意を。
本文には以下のように記載します。
<ul class="rslides"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul>
画像をただ順番に並べるだけですね。
CSSはこのように記述します。
.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
ポイントは
[position属性] [overflow] [float:left]
ですので、そこだけご注意ください。
そして、以下のスクリプトを組み込んで設置完了です。
<script> $(function() { $(".rslides").responsiveSlides(); }); </script>
あとは、オプションをお好みで調整していきます。
自動スクロールのOn/Offや、画像の切り替わり速度等、functionの中でHookをかますもヨシ、直接jsファイルの初期値を編集するもヨシです。
タグ: jQuery