2012/09/26
フルスクリーンのコンテンツイメージスライダーのjQueryプラグイン
今回は、画像をウィンドウサイズいっぱいに広げて、かつそれをスライダーとして表示してくれるプラグインです。
RSliderというプラグインで、比較的簡単に設置できます。
中にコンテンツを置くことも可能ですので、飲食店のサイトや、イベント系のサイトに使えそうですね！
デモを作成しましたので、ご覧ください。
RSliderの使い方
まずは、スクリプトを読み込みます。
haed内に、以下を記述します。
|
1 2 3 | <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.responsive.slider.js'></script> |
このstyle.cssは、ダウンロードしたファイルにあるcssで、読み込んだ方が楽になります。
そしてスクリプトはこれだけ記述するだけです。
JavaScript
|
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function () { $('#r-slider-wrapper').rslider(); }); </script> |
そして、HTMLは以下になります。
HTML
|
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 60 61 62 63 64 65 66 67 68 69 | <div id="r-slider-wrapper"> <div id="r-slider-category-wrapper"> <ul> <li><a href="#first-cat">Yokohama</a> </li> <li><a href="#second-cat">Landscape</a> </li> <li><a href="#third-cat">Woman</a> </li> </ul> <div id="r-slider-content-right"> <div id="r-nav"> <span id="r-prev"><</span> <span id="r-next">></span> </div> </div> </div> <div id="r-slider-contents-wrapper"> <div id="r-slider-content-left"> <div id="first-cat"> <div class="r-img-wrap"> <img src="sample1.jpg" /> </div> <div class="r-img-wrap"> <img src="sample2.jpg" /> </div> <div class="r-img-wrap"> <img src="sample3.jpg" /> </div> <div class="r-img-wrap"> <img src="sample4.jpg" /> </div> <div class="clear"> </div> </div> <div id="second-cat"> <div class="r-img-wrap"> <img src="sample5.jpg" /> </div> <div class="r-img-wrap"> <img src="sample6.jpg" /> </div> <div class="r-img-wrap"> <img src="sample7.jpg" /> </div> <div class="r-img-wrap"> <img src="sample8.jpg" /> </div> <div class="clear"> </div> </div> <div id="third-cat"> <div class="r-img-wrap"> <img src="sample9.jpg" /> </div> <div class="r-img-wrap"> <img src="sample10.jpg" /> </div> <div class="r-img-wrap"> <img src="sample11.jpg" /> </div> <div class="r-img-wrap"> <img src="sample12.jpg" /> </div> <div class="clear"> </div> </div> </div> </div> </div> |
こちらも、idやclass等は、デフォルトのままですが、cssやjsがそのnameで書かれているので、
変えない方がいいかと思います。
cssは、
style.cssを参照。
このプラグインは、レスポンシブなので、
スマホにも対応しております。
このプラグインのダウンロードは以下から、
おまけとして、
無料で、レスポンシブのサイトが作れちゃうサイトを紹介します。
なんと多言語化もできるそうです。
Author Profile
スターフィールド編集部
SHARE
