第1回「FlexSlider 画像スライダーを作成」jQuery・javascript・css3

「FlexSlider」

といjQueryライブラリを使い、画像スライダーが便利に作くることができます。

 

サンプル      動きます             サンプルページ

 

また、スライドショーだけもできます。

サンプル      動きます             サンプルページ

 

また、左右の「<」と「>」を出さないパターンもできます。

サンプル      動きます             サンプルページ

 


公式サイトから、javascriptファイルとcssファイルをダウンロードしそれを読み込むことで、flexsliderの全ての機能を使えます。

flexslider


 

 

オプションも大量に用意されていて、スライドショーでできる事は、ほぼ、すべてできます。

 

日本語訳オプション           引用元:flexsliderの使い方(デモ)とオプションの日本語訳。

Structures – 構成 ※あんまり気にしないで良いところ
slider スライダー要素自身。平たく言えば元になっている要素。 Object
slider.container The ul.slides スライダー要素の中にあるul要素。これも構成要素としては重要。 Object
slider.slides スライドされる各スライド要素。 Object
slider.count 各スライドの個数 Int
slider.currentSlide 現在のスライド Int
slider.animatingTo .before()の関数に含ませると便利。
the slide currently animating to
Int
slider.animating is slider animating? Boolean
slider.atEnd is the slider at either end? Boolean
slider.manualPause マウスオンによる強制停止イベント Boolean
slider.controlNav コントロールナビゲーション Object
slider.directionNav 左右のナビゲーション Object
slider.controlsContainer コントローラーのコンテナ Object
slider.manualControls The manualControls element of the slider Object
slider.flexAnimate(target) Move slider – (target, pause) parameters Function
slider.pause() Pause slider slideshow interval Function
slider.play() Resume slider slideshow interval Function
slider.canAdvance(target) returns boolean if slider can advance – (target) parameter Function
slider.getTarget(dir) get target given a direction – “next” or “prev” parameter Function
Options – オプション
namespace: “flex-“, 【NEW】スライダーが生成するタグすべてに付与するクラス名の接頭辞。デフォルトは”flex-“ String
selector: “.slides > li”, 【NEW】各スライドのタグを指定できる。デフォルトはli。 Selector
animation: “fade”, アニメーションタイプの指定。フェードかスライド。”fade”または”slide”で指定。 String
easing: “swing”, 【NEW】Jqueryのイージングが使える。「jQuery easing plugin」もサポート。デフォルトは”swing”。 String
direction: “horizontal”, スライドの方向指定。「たて」と「よこ」がある。デフォルトは”horizontal”(水平つまり『よこ』ってことね)。”horizontal”または”vertical”で指定。 String
reverse: false, 【NEW】アニメーションの進む方向を、「戻していく」か「最初に戻るか」。”true” か “false” で指定。 Boolean
animationLoop: true, ループにするかどうか。”true” か “false” で指定。もしfalseの(ループしない)とき、directionNavは最後のところで”disable”クラスを受け取ります。
※カルーセル(1セルに複数セルを内包させるヤツ。文字通り回転木馬みたいなヤツね。)で表示するときにはループが効かないようです。そのほかにもループしてくれるしてくれない場面は想定できるので、注意です。
Boolean
smoothHeight: false, 【NEW】よこスライドモードのとき、スライド高さをスムーズに設定させるかどうか。”true” か “false” で指定。 Boolean
startAt: 0, 何番目のスライドからスタートするか。0から始まる整数で指定。 Integer
slideshow: true, 自動でスライドショーするかしないか。”true” か “false” で指定。 Boolean
slideshowSpeed: 7000, スライドショーの停止スピード指定。デフォルトは7秒。ミリセコンド秒で設定。(1秒=1000) Integer
animationSpeed: 600, スライドの動くスピード。デフォルトは0.6秒。ミリセコンド秒で設定。(1秒=1000) Integer
initDelay: 0, 【NEW】初期のディレイ。ミリセコンド秒で設定。(1秒=1000) Integer
randomize: false, 順番をランダムに。”true” か “false” で指定。 Boolean
Usability features
pauseOnAction: true, スライドショーを設定している場合で、スライド上で何らかの操作がされているとき、スライドショーを一時停止するかしないか。”true” か “false” で指定。スライドショーのときはやっておいたほうがいい。 Boolean
pauseOnHover: false, スライドショーを設定している場合で、スライド上にマウスオン時に、スライドショーを一時停止するかしないか。”true” か “false” で指定。スライドショーのときはやっておいたほうがいい。 Boolean
useCSS: true, 【NEW】CSS3 transitions対応ブラウザではCSS3によるアニメーションを行うか行わないか。しない場合はJavascriptで行われる、はず。”true” か “false” で指定。
※あるブラウザでは動いたのに、このブラウザでは動きませんとかになったらfalseにしてみる。iPhone5s iOS7ではfalseに。
Boolean
touch: true, 【NEW】スワイプをさせるかさせないか。”true” か “false” で指定。もしスマートフォンやタブレットなどのモバイルデバイスでflexsliderを使用するときにはtrueにしておきたいオプションだ。だが、もし単なるフェードするスライドなどで使用する場合は、一度スライドにタッチしてしまうとpauseがかかったまま停まってしまうので、注意が必要だ。 Boolean
video: false, もしスライダー内でビデオを使う場合、グラフィカルな欠陥を避けるためCSSアニメーションは使用されない。(なんか変な訳だな)
If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches Primary Controls
Boolean
Primary Controls
横に出てくる矢印とか、下に出てくる球々のナビゲーション関連
controlNav: true, ページングコントロールを生成するかしないか。”true” か “false” で指定。
※手動でコントロールを置く場合はtrueにしておく
Boolean
directionNav: true, ページ送り(次へ/前へ)を生成するかしないか。”true” か “false” で指定。 Boolean
prevText: “Previous”, 「前へ」ボタンのテキストの変更ができる。デフォルトは”Previous” String
nextText: “Next”, 「次へ」ボタンのテキストの変更ができる。デフォルトは”Next” String
Secondary Navigation
キーボード、マウスホイールなんかの設定などなど
keyboard: true, キーボードの右左カーソルキーでの操作を有効にするかしないか。”true” か “false” で指定。 Boolean
multipleKeyboard: false, 【NEW】 複数のスライダーにキーボード操作を許可するかしないか。デフォルトでは一個以上のスライダーには許可しない設定になっている。
※試したことないんですけど、許可すると一斉に動くっていうことかな?
Boolean
mousewheel: false, マウスホイールでの操作をさせるかさせないか。
jquery.mousewheel.js
マウスホイール用プラグインを読み込ませる必要あり。
Boolean
pausePlay: false, 再生ボタンを生成するかしないか。 Boolean
pauseText: ‘Pause’, 再生ボタンの『再生時』のときのテキスト指定。デフォルトは’Pause’。 String
playText: ‘Play’, 再生ボタンの『一時静止時』のときのテキスト指定。デフォルトは’Play’。 String
Special properties
controlsContainer: “”, クラスセレクターを使うこと。
Declare which container the navigation elements should be appended too.
デフォルトはflexslider の構成、要素。
例としては “.flexslider-container”とか。対象要素が見つからなかった場合は無視されます。
{UPDATED} Selector
manualControls: “”, カスタムコントロール宣言。
例えば”.flex-control-nav li” とか “#tabs-nav li img”,とかと、目標のセレクターを宣言します。
コントロールナビにある要素の数をスライドの数と合わせるべきです。
Selector
sync: “”, 【NEW】二つのスライダーを同期させるオプション。注意要。 Selector
asNavFor: “”, サムネイルナビゲーションを使うときに親スライダーと紐付けるときのオプション。親スライダーのセレクターを指定。 Selector
Carousel Options
※カルーセルで見せたいとき
(回転木馬つまり複数個のスライドを1セルづつにして見せたいとき)
itemWidth: 0, 【NEW】各スライドの幅。ピクセル数で指定。ボーダーライン、パディングも含んだ大きさ。 Integer
itemMargin: 0, 【NEW】各スライドのマージン。
※これは他のスライダーでも必ずつけて欲しいオプションだ。CSSで設定した値を合算していれておけば自動的に余りなくスライドを配置してくれる。
Integer
minItems: 0, 【NEW】最低スライド数。これよりも少ないときはリサイズされる。 Integer
maxItems: 0, 【NEW】最大表示スライド数。これよりも多いときはリサイズされる。 Integer
move: 0, 一回のスライドアニメーションで送って欲しいスライドの数。0を指定すると、表示されているスライドすべてが送られる。 Integer
CallBack- コールバック
(コールバックとはなんらかの動作(イベント)が起こったときに
『呼び出し』したいものがあるときに使う。
覚えておくとけっこう使える。)
【例】start:function(){※ここにスクリプトを書く}
start: function(){}, 最初のスライドがロードされた瞬間に発生するコールバック。 Callback
before: function(){}, それぞれのスライドが動くときに発生するコールバック。 Callback
after: function(){}, それぞれのスライドが動き終わったときに発生するコールバック。 Callback
end: function(){}, スライドが最後まで着いたときに発生するコールバック。 Callback
added: function(){}, 【NEW】スライドが追加されたときに発生するコールバック。 Callback
removed: function(){} 【NEW】スライドが削除されたときに発生するコールバック。 Callback

 

日本語訳されたオプションのサイト

 

オプション公式サイト

英語のサイトですので、ゆっくり読んでください。


 

 

具体的な「htmlコード jQuery 」の書き方は、次回、まとめて記事にしたいと思っています。

今回は、ライブラリの紹介の記事でした。

 

みなさんも使ってみてはいかがでしょうか。

今回は以上です。お疲れさまでした。

 


・今回の記事を書くにあたって参考にしたサイト

flexslider

オプション公式サイト

flexsliderの使い方(デモ)とオプションの日本語訳。

 

参考にさせて頂いたサイトの管理者様、今回もありがとうございました。

 

 

,,,,

Comments

Leave a comment

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