Blog

スマートフォン対応の画像スライダー「flexslider」

最近webサイトを制作する際、スマフォ対応が求められており、

その方法としてレスポンシブwebデザインといった手法があります。

 

その際に、使えるjQueryプラグインを紹介します。

flexsliderという画像スライダーのプラグインです。

 

Flexslider | WooThemes

 

サイトのメインイメージで使える代物で、

windowの幅に合わせ、画像を縮小してくれます。

 

このプラグインでできることは、

・スライドショーが、フェイドかスライド(横移動か縦移動)の設定ができ、計3パターンから選択できる

・自動、手動でスライドショーが可能

・前へ、次へ、スライドの操作を簡単に設置できる

・スライドショーをループさせることができる

等々です。  

 

デモを作成したので、以下からご覧下さい。

 

DEMO

 

ウィンドウの横幅を縮めてみると、

画像の幅が縮小されるかと思います。

(サイト自体もレスポンシブになっています。そこまでしっかりやっていないですがww)

 

flexsliderの使い方

 

まずは、head部分に以下を記述します。

 

flexslider.cssは自分好みに修正することが可能です。

 

そして、上記の下に、  

 

を記述します。

 

HTMLは、

 

ul,liタグで囲みます。

 

デモでは以下のようなソースになっています。

オプションの解説もしているのでご覧下さい。

 

javascript

 

css

 flexslider.cssを修正したものになります。

 

html  

 

flex-containerで囲んでいるのは、

ナビゲーションやコントロールがデフォルトだと、

flexsliderを親要素として配置されるので、

flexsliderにoverflow:hidden;がかかっていると表示が切れちゃうためです。

 

ナビゲーションをなくすか、スライドの枠ないに収めるなら、

flex-containerは必要ありません。

 

liタグで囲むので、画像だけでなく、

コンテンツを入れることが可能だと思います。

 

ただ、レスポンシブになっているので、

テキストなんかは、調節が必要になってくると思います。

 

こういったスマフォに対応したプラグインが最近よく出てきていますね。

フリックもできたらなおよかったんですけどね。

 

いいのがあればまた紹介したいと思います。

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ