Webの記録

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

投稿日:2012年4月19日 更新日:

この記事は約 6 分で読めます。

FlexSliderのイメージ

今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。

スマートフォンでも表示を確認したところ、表示サイズに応じて表示サイズを調整しているようで画面内にきちんと画像を表示してくれました。

これからのサイト作りには便利かもしれません。

デモを見る

特徴

  • 軽量
  • 実装が簡単
  • スマートフォンなどウィンドウサイズに応じて表示サイズを調整してくれる
  • オプションがたくさんあるので、自分なりに表示の仕方を変えられる
  • IE7以上のブラウザで対応
  • MITライセンス

設置方法

FlexSliderをダウンロード

配布元サイトからファイル一式をダウンロードします。

必要なのは、「jquery.flexslider.js(もしくはjquery.flexslider-min.js)」です。必要に応じて「flexslider.css」も利用します。

スライダーのボタンも使う場合は「theme」の中に「bg_control_nav.png」と「bg_direction_nav.png」があります。

 

HTMLのheaderの記述

jsファイルの関連付けの記述。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

スライドショー用のScriptをheaderに続けて記述。

<script type="text/javascript">
$("document").ready(function(){
	$('.flexslider').flexslider();
});
</script>

 

body部分に表示したい画像のパスをliの中に記述。liは画像の数分記述。
<div class="flexslider">
   <ul class="slides">
	<li>
	   <img src="images/top/top_img1.jpg" />
	   <p class="flex-caption">画像1のキャプション</p>
	</li>
	<li>
	   <img src="images/top/top_img2.jpg" />
	   <p class="flex-caption">画像2のキャプション</p>
	</li>
	<li>
	   <img src="images/top/top_img3.jpg" />
	   <p class="flex-caption">画像3のキャプション</p>
	</li>
    </ul>
</div>
必要に応じてCSSを記述。

スライダーのボタンを入れ替えたり、パスを変更する場合は「flexslider.css」の中の53、62行目のパスを変更します。

必要に応じて書き換えます。

オプション。

オプションは試せていないのですが、以下のようなオプションがあるようです。

animation:
// "slide"を指定するとカルーセルスライド("fade" or "slide")
slideDirection: "horizontal",
//verticalを指定すると縦方向へスライドする( "horizontal" or "vertical" )
slideshow: true,
 //falseでオートスライドをなし
slideshowSpeed: 7000,
//スライドのスピード
animationDuration: 600,
//アニメーションのスピード
directionNav: true,
//falseで次へと前へのナビゲーションをなし
controlNav: true,
//falseで下のコントロールボタンをなし
keyboardNav: true,
//falseでキーボードで画像をおくれなくなる
animationLoop: true,
//falseで画像の繰り返し表示をなし
slideToStart: 0,
//最初に見せる画像を指定
mousewheel: false,
//trueでマウスホイールで画像を送れる
randomize: false,
//trueで画像表示の順番をランダムにする

参考

やってて良かったWordpress。FlexSliderのプラグインがあるようです。
これから使う機会がきっとあると思うので、コレもメモ。

レスポンシブWebデザイン対応のjQueryイメージスライダー・FlexSliderがWordPressプラグインになってた」/かちびと.netさま

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

気になるブラウザサイズ 集計結果。

この記事は約 2 分で読めます。 最近、Webサイトを作るのにどれ位の幅で作れば良いのかとても迷ってきました。 いろんな方のサイトをいじらせてもらいながら、表示確認をしていて驚く事もしばしば・・・。 …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …