jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。
このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、
- ボタンの自動表示
- キーボードの左右キー対応
- 自動でのスライドショー開始
などの機能があります。
まずはこちらのサンプルをご覧ください。
→ 「Responsly.js」サンプルページ
「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。
まずは、こちらのページからZIPファイルまたはTARファイルをダウンロードします。
ダウンロードしたファイルを解凍すると、slidyというフォルダが中に存在しています。そのフォルダの中にスライドショーに必要なｃｓｓやｊｓファイルなどがありますので、今回はこれを使用します。
※画像をスライドショーとして使用する場合は、用意する画像は幅1140ｐｘが良いようです。
<head>部にｃｓｓファイルを設定します。
<link rel=”stylesheet” href=”slidy/slidy.css”>
そして、</body>の直前にＪａｖａＳｃｒｉｐｔを設定します。
<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=”イメージ１”>
<!– キャプションを入れる時は<figcaption>を使用します –>
<figcaption>キャプション１</figcaption>
</figure>
<!– スライド 2 –>
<figure>
<img src=”イメージ２”>
<figcaption>キャプション２</figcaption>
</figure>
<!– Slide 3 –>
<figure>
<p> テキストを入れることもできます。</p>
<figcaption>キャプション３</figcaption>
</figure>
<!– あとは必要に応じて繰り返し・・・ –>
</div>
</div>
以上で完成です。
もしスライドショーを自動でスライドさせたい場合は、</body>直前でＪａｖａＳｃｒｉｐｔを設置する際に、
<script>
$(‘.slidyContainer’).slidy({
auto: true, // ここでスライドショーの自動開始をONにする
});
</script>
と記述します。
以下にサンプルページのソースを書いておいきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Responsly.js サンプル</title> <link rel="stylesheet" href="slidy/slidy.css"> </head> <body> <div id="slidyBanner" class="slidyContainer" title="Your tooltip text"> <div class="slidySlides"> <!-- Each slide is wrapped in figure section --> <!-- Slide 1 --> <!-- add the 'slidyCurrent' class to which slide you want as default --> <figure class="slidyCurrent"> <!-- Your context goes here --> <img alt="NASA Goddard Photo ICESCAPE" src="img/sample01.jpg"> <!-- Use the figcaption element to add captions --> <figcaption>Retrieving Dropped Supplies</figcaption> </figure> <!-- Slide 2 --> <figure> <img alt="NASA Goddard Photo ICESCAPE" src="img/sample02.jpg"> <figcaption>Sampling Melt Ponds</figcaption> </figure> <!-- Slide 3 --> <figure> <img alt="NASA Goddard Photo ICESCAPE" src="img/sample03.jpg"> <figcaption>Cutting Through Multiyear Ice</figcaption> </figure> <!-- Slide 4 --> <figure> <p> テキストをいれることもできます。</p> <p> ICESCAPE, or Impacts of Climate on EcoSystems and Chemistry of the Arctic Pacific Environment, is a shipborne NASA mission to explore the impacts of climate change in the Arctic Ocean. During summer of 2011, the ICESCAPE scientists discovered a large bloom of ocean plant life growing under sea ice. To learn more about this discovery and its possible impacts for the Arctic ecosystem, the global carbon cycle and the ocean's energy balance, </p> </figure> <!-- Add more slides as necessary --> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="slidy/slidy.js"></script> <script> $('.slidyContainer').slidy({ }); </script> </body> </html> |
あわせてお読みください
jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。 特徴は、スマホ…
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリ…
「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエ…
コメントを残す