Responsly.js

jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。

このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、

  • ボタンの自動表示
  • キーボードの左右キー対応
  • 自動でのスライドショー開始

などの機能があります。

まずはこちらのサンプルをご覧ください。

→ 「Responsly.js」サンプルページ

「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。


まずは、こちらのページからZIPファイルまたはTARファイルをダウンロードします。

ダウンロードしたファイルを解凍すると、slidyというフォルダが中に存在しています。そのフォルダの中にスライドショーに必要なcssやjsファイルなどがありますので、今回はこれを使用します。

※画像をスライドショーとして使用する場合は、用意する画像は幅1140pxが良いようです。

<head>部にcssファイルを設定します。
<link rel=”stylesheet” href=”slidy/slidy.css”>

そして、</body>の直前にJavaScriptを設定します。
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script src=”accordly/accordly.js”></script>
<script src=”slidy/slidy.js”></script>

<script>
$(‘.slidyContainer’).slidy({
});
</script>

以上で準備完了です。続いて<figure>要素を使用してコンテンツを記述していきます。

<body>部に

<div id=”slidyBanner” title=”Your tooltip text”>
<div>
<!– スライド 1 –>
<figure>
<!– コンテンツはここに記入 –>
<img  src=”イメージ1”>
<!– キャプションを入れる時は<figcaption>を使用します –>
<figcaption>キャプション1</figcaption>
</figure>

<!– スライド 2 –>
<figure>
<img src=”イメージ2”>
<figcaption>キャプション2</figcaption>
</figure>

<!– Slide 3 –>
<figure>
<p> テキストを入れることもできます。</p>
<figcaption>キャプション3</figcaption>
</figure>

<!– あとは必要に応じて繰り返し・・・ –>

</div>
</div>

以上で完成です。

もしスライドショーを自動でスライドさせたい場合は、</body>直前でJavaScriptを設置する際に、

<script>
$(‘.slidyContainer’).slidy({
auto: true,       // ここでスライドショーの自動開始をONにする
});
</script>

と記述します。

以下にサンプルページのソースを書いておいきます。どうぞご参考まで。

この記事と関連してると思われる記事: