Blog

フルスクリーンのコンテンツイメージスライダーのjQueryプラグイン

今回は、画像をウィンドウサイズいっぱいに広げて、かつそれをスライダーとして表示してくれるプラグインです。

 

RSliderというプラグインで、比較的簡単に設置できます。

 

中にコンテンツを置くことも可能ですので、飲食店のサイトや、イベント系のサイトに使えそうですね!

 

デモを作成しましたので、ご覧ください。

 

DEMO

 

RSliderの使い方

 

まずは、スクリプトを読み込みます。

haed内に、以下を記述します。

 

 

このstyle.cssは、ダウンロードしたファイルにあるcssで、読み込んだ方が楽になります。

 

そしてスクリプトはこれだけ記述するだけです。

 

JavaScript

 

 

そして、HTMLは以下になります。

 

HTML

 

 

こちらも、idやclass等は、デフォルトのままですが、cssやjsがそのnameで書かれているので、

 

変えない方がいいかと思います。

 

cssは、

style.cssを参照。

 

このプラグインは、レスポンシブなので、

スマホにも対応しております。

 

このプラグインのダウンロードは以下から、

 

Rslider

  

 

おまけとして、

無料で、レスポンシブのサイトが作れちゃうサイトを紹介します。

なんと多言語化もできるそうです。

 

http://www.edicy.com/

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ