実に手軽で軽量で、レスポンシブデザインにも対応した、
ちょっとしたjQueryイメージスライダーを導入するのにナイスなプラグインをご紹介。

「ResponsiveSlides.js」

フェードイン・フェードアウトのギミックによる複数枚画像の切り替えを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