menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/05/16
  • JQuery

有名jQueryレスポンシブ軽量スライダー FlexSlider2の使い方

豊富なオプションでカルーセルもできる。高機能でIE7まで対応している。超有名万能スライダーFlexSlider2です。
flexslider

使用方法

ダウンロード

flexslider.js

準備するファイル

・jquery.js


・jquery.flexslider.js


・flexslider.css

外部ファイルの読み込み

head内へ以下を追加します。

HTML

cssを使用しているため、class名に「flexslider」「sliders」を指定し、普通にリストを作ります。


JavaScript

<head>〜</head>内に以下のScriptを埋め込みます。
これだけです

OPTION

namespace :FlexSliderのスクリプトが生成する要素につく接頭辞。デフォルトは”flex-“
selector :スライドさせる箇所を指定できます。デフォルトは”.slides > li”
animation :スライドの方式を指定。fade/slide
easing :アニメーションのイージングの指定。jQuery Easing Pluginが必要。
direction :スライドの横縦を選択。horizontal/vertical
reverse :スライドする方向、左右上下を選択。true/false
animationLoop :ループさせるか選択。true/false
smoothHeight :スライダーの高さが変わるとき、高さをアニメーションしながら変えるか、一瞬で変えるかを選択。true/false
startAt :何枚目のスライドから開始するかを選択。
slideshow :自動でスライドを進めるかどうかを選択。true/false
slideshowSpeed :スライドするスピードを調節。数字が高いほど遅く、低いほど早くなります。
animationSpeed :アニメーションスピードを調節。数字が高いほど遅く、低いほど早くなります。
initDelay :スライドが始まるまでの時間を調節。
randomize :スライドの順番をランダム設定。
controlNav :スライダーのナビを表示。true/false
directionNav :prevとnextのコントロールボタンを表示。true/false<
prevText :「戻る」のナビゲーションの文字列。デフォルトは”Previous”
nextText :「進む」のナビゲーションの文字列。デフォルトは”Next”
itemWidth :カルーセルを設定した際の画像1枚の幅を指定。
itemMargin :カルーセルの画像1枚のマージンを指定。
minItems :カルーセルの画像を最低で何枚を一画面に表示するかを指定。
maxItems :カルーセルの画像を最大で何枚を一画面に表示するかを指定。
move :カルーセルの画像をスライドで何枚動かすかを指定。

この他にも複数のオプションがあります。

とても有名なスライダーで複数のオプションもありスライダーを実装するときはとりあえずこれからというプラグインです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11