slider

使いやすいjqueryスライダー(レスポンシブ対応)2:

bxSlider

http://bxslider.com/

jQuery Content Slider   Responsive jQuery Slider   bxSlider

 

  • レスポンシブ対応
  • 水平、垂直スライド対応、フェードも可能
  • スライドコンテンツは画像、動画、HTMLが可能
  • タッチ、スワイプサポート
  • IE7+、Firefox,Chrome,Safari,iOS,Android 対応

よく使いそうな項目だけ抜粋しています。
詳しい情報はこちら
http://bxslider.com/options

基本的なプロパティ

プロパティ 初期値 説明
mode horizontal スライドタイプ「’horizontal’, ‘vertical’, ‘fade’」から選択
speed 500 スライドのスピード(ミリ秒:1/1000)
slideMargin 0 スライド間のマージン幅
startSlide 0 何番目の要素からスライドをスタートするか、0から数える
randomStart false スライドをランダムで表示するか
slideSelector スライド要素の指定
infiniteLoop true 真偽値(boolean)

アニメーションをループさせるかどうか

hideControlOnEnd false Nextを隠す

infiniteLoopf:false の時のみ使用

easing easingの種類

if using CSS: ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’. If not using CSS: ‘swing’, ‘linear’ (see the above file for more options)

captions false 真偽値(boolean)

画像のtitle要素をcaptionとして表示するかどうか

ticker false 真偽値(boolean)

スライドをニュースティッカーのように表示する場合

tickerHover false 真偽値(boolean)

マウスオーバーした時に一時停止するかどうか

adaptiveHeight false 真偽値(boolean)

スライド要素の高さを動的にフィットさせるかどうか

adaptiveHeightSpeed 500 数値

adaptiveHeight:trueの時のみ transitionの時間

video false 真偽値(boolean)

スライドに動画を含むかどうか trueの場合 plugins/jquery.fitvids.js必要?

responsive true 真偽値(boolean)

スライド要素を自動リサイズするかどうか

useCSS true 真偽値(boolean)

水平、垂直スライドのアニメーションでcssトランジョンを使うかどうか

preloadImages visible ‘all’, ‘visible’

スライドに動画を含むかどうか

touchEnabled true 真偽値(boolean)

スワイプトランジョンを許可するかどうか

swipeThreshold 50 Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
oneToOneTouch true If true, non-fade slides follow the finger as it swipes
preventDefaultSwipeX true If true, touch screen will not move along the x-axis as the finger swipes
preventDefaultSwipeY false If true, touch screen will not move along the y-axis as the finger swipes

peger機能

プロパティ 初期値 説明
pager true pager (真ん中の○○○●)を表示するかどうか
pagerType full ‘full’, ‘short’

If ‘full’, a pager link will be generated for each slide. If ‘short’, a x / y pager will be used (ex. 1 / 5)

pagerShortSeparator / pagerTypeがshortの時、区切り文字として使う
pagerSelector Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport

コントロール機能

プロパティ 初期値 説明
controls true Prev,Next矢印を表示するかどうか
nextText Next 次へボタンに使う文字列
prevText Prev 戻るボタンに使う文字列
autoControls false trueの場合、「Start/Stop」を表示

自動機能

プロパティ 初期値 説明
auto false スライドアニメーションを自動再生するかどうか
pause 4000 次のアニメーションまでの間隔
autoStart true falseの場合はスタートボタンをクリックしてスタート
autoHover false スライダーにマウスホバーした場合、一時停止するかどうか

カルーセル機能

プロパティ 初期値 説明
minSlides 1 スライド時に表示させる画像の最小数
maxSlides 1 スライド時に表示させる画像の最大数
moveSlides 0 遷移するときに移動する画像の枚数
slideWidth 0 スライド間のマージン

基本的なDemo

 

使いやすいjqueryスライダー(レスポンシブ対応)1:FlexSlider 2

FlexSlider 2

Flex Slider 2
http://flexslider.woothemes.com/index.html

★レスポンシブ対応
★カルーセル対応
★タッチデバイスのフリック対応
★キャプション表示可能
★動画スライドOK
など。

設定できるプロパティも多数です。設置も簡単。

設定できるプロパティの一覧
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
以下にも記載。ところどころ和訳がおかしいところもあるかもです。

基本的なプロパティ

プロパティ 初期値 説明
namespace: flex- flexsliderが生成する接頭辞を指定
selector: .slides > li スライドするセレクタを指定
animation: fade アニメーションのタイプ

“fade” or “slide”

easing: swing jquery transtion を指定
direction: horizontal スライドする方向

“horizontal” or “vertical”

reverse: false 真偽値(boolean)

アニメーションの方向を逆行するかどうか

animationLoop: true 真偽値(boolean)

アニメーションをループさせるかどうか

smoothHeight: false 真偽値(boolean)

horizontal modeのときにスライドのたかさを

startAt: 0 何番目の要素からスライドをスタートするか
slideshow: true 真偽値(boolean)

アニメーションスライドを自動再生するか

slideshowSpeed: 7000 スライドのスピード(ミリ秒:1/1000)
animationSpeed: 600 アニメーションのスピード(ミリ秒:1/1000)
initDelay: 0 スライドをスタートするまでの時間
randomize: false 真偽値(boolean)

スライドをランダムでスライドさせる

pauseOnAction: true 真偽値(boolean)

コントロール要素を操作している間、スライドを中止するかどうか

pauseOnHover: false 真偽値(boolean)

マウスオーバーでスライドを中止するかどうか

useCSS: true 真偽値(boolean)

css3対応可能な状況ならcss3トランジョンを使う

touch: true タッチデバイスでスワイプ動作を可能にするかどうか
video: false 真偽値(boolean)

スライドに動画を含むかどうか

スライドのコントロール機能

プロパティ 初期値 説明
controlNav: true スライダーナビゲーション(○○○●)を表示するかどうか
directionNav: true 両サイドのprev(<),Next(>)を表示するかどうか
prevText: Previous directionNavがtrueの場合の「戻る」のテキスト
nextText: Next directionNavがtrueの場合の「次へ」のテキスト

オプション的なナビゲーション機能

プロパティ 初期値 説明
keyboard: true 真偽値(boolean)

キーボードの←→でスライドの移動を可能にするかどうか

multipleKeyboard: true 真偽値(boolean)

両サイドのprev(<),Next(>)を表示するかどうか

mousewheel: false 真偽値(boolean)

マウスホイールでの移動を許可するかどうか

jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) が必須

pausePlay: false 真偽値(boolean)

「再生」「停止」ボタンを表示するかどうか

pauseText: Pause 文字列

pausePlay:がtrueの時、「停止」ボタンのテキスト

playText: Play 文字列

pausePlay:がtrueの時、「再生」ボタンのテキスト

特別プロパティ

プロパティ 初期値 説明
controlsContainer: FlexSliderのコンテナー要素「.flexslider-container」
manualControls: コントロール要素を独自の名前をつける


(.flex-control-nav li/#tabs-nav li img)

sync: 他のスライダーと同期させる(扱い注意)
asNavFor: Internal property exposed for turning the slider into a thumbnail navigation for another slider

カルーセルオプション

itemWidth: 0 数値

アイテムの幅サイズ

itemMargin: 0 数値

アイテム間のマージン

minItems: 0 数値

アイテムの最小値。画面リサイズ(レスポンシブ)時の下限。画面が小さくなっても表示させるアイテム数

maxItems 0 数値

アイテムの最大値。画面リサイズ(レスポンシブ)時の上限。大きい画面で表示した場合の最大表示数

move: 0 数値

カルーセルが動くときに移動するアイテムの数