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さま

[note]
【スライダー系の関連かもしれない記事】

[/note]

-Webの記録
-, , ,

執筆者:


comment

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

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

関連記事

no image

「WordPress Popular Posts」バージョン2.3.0アップデートでエラーが?!

この記事は約 1 分で読めます。 「WordPress Popular Posts」のバージョン2.3.0にアップデートすると、データベースエラーで記事が表示されなくなる現象が起きました! プラグイン …

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …

no image

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …