WEB Tips デザイン・コーディング

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

2015-04-22

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

使い勝手のいいjQuery製のスライダーを2つ紹介します。どちらもレスポンシブサイトに対応しているのでスマホ表示もOKです。

FlexSlider 2

FlexSlider 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:swingjquery 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:PreviousdirectionNavがtrueの場合の「戻る」のテキスト
nextText:NextdirectionNavがtrueの場合の「次へ」のテキスト

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

プロパティ初期値説明
keyboard:true真偽値(boolean)
キーボードの←→でスライドの移動を可能にするかどうか
multipleKeyboard:true真偽値(boolean)
両サイドのprev(<),Next(>)を表示するかどうか
mousewheel:false真偽値(boolean)
マウスホイールでの移動を許可するかどうか
jquery.mousewheel.js が必須
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数値
アイテムの最小値。画面リサイズ(レスポンシブ)時の下限。
画面が小さくなっても表示させるアイテム数
maxItems0数値
アイテムの最大値。画面リサイズ(レスポンシブ)時の上限。
大きい画面で表示した場合の最大表示数
move:0数値
カルーセルが動くときに移動するアイテムの数

bxSlider

http://bxslider.com/

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

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

基本的なプロパティ

プロパティ初期値説明
modehorizontalスライドタイプ「'horizontal', 'vertical', 'fade'」から選択
speed500スライドのスピード(ミリ秒:1/1000)
slideMargin0スライド間のマージン幅
startSlide0何番目の要素からスライドをスタートするか、0から数える
randomStartfalseスライドをランダムで表示するか
slideSelector スライド要素の指定
infiniteLooptrue真偽値(boolean)
アニメーションをループさせるかどうか
hideControlOnEndfalseNextを隠す
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)
captionsfalse真偽値(boolean)
画像のtitle要素をcaptionとして表示するかどうか
tickerfalse真偽値(boolean)
スライドをニュースティッカーのように表示する場合
tickerHoverfalse真偽値(boolean)
マウスオーバーした時に一時停止するかどうか
adaptiveHeightfalse真偽値(boolean)
スライド要素の高さを動的にフィットさせるかどうか
adaptiveHeightSpeed500数値
adaptiveHeight:trueの時のみ transitionの時間
videofalse真偽値(boolean)
スライドに動画を含むかどうか trueの場合 plugins/jquery.fitvids.js必要?
responsivetrue真偽値(boolean)
スライド要素を自動リサイズするかどうか
useCSStrue真偽値(boolean)
水平、垂直スライドのアニメーションでcssトランジョンを使うかどうか
preloadImagesvisible'all', 'visible'
スライドに動画を含むかどうか
touchEnabledtrue真偽値(boolean)
スワイプトランジョンを許可するかどうか
swipeThreshold50Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
oneToOneTouchtrueIf true, non-fade slides follow the finger as it swipes
preventDefaultSwipeXtrueIf true, touch screen will not move along the x-axis as the finger swipes
preventDefaultSwipeYfalseIf true, touch screen will not move along the y-axis as the finger swipes

peger機能

プロパティ初期値説明
pagertruepager (真ん中の○○○●)を表示するかどうか
pagerTypefull'full', 'short'
「full」の場合、各スライドに対してページャーが生成されます。 'short' の場合、「1 / 5」のようなページャーになります。
pagerShortSeparator/pagerTypeがshortの時、区切り文字として使う
pagerSelector ページャーを設定するために使用される要素。 デフォルトではページャーは bx-viewport に追加されます

コントロール機能

プロパティ初期値説明
controlstruePrev,Next矢印を表示するかどうか
nextTextNext次へボタンに使う文字列
prevTextPrev戻るボタンに使う文字列
autoControlsfalsetrueの場合、「Start/Stop」を表示

自動機能

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

カルーセル機能

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

基本的なDemo

-WEB Tips, デザイン・コーディング
-