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

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 の時のみ使用

easingeasingの種類

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'

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の時、区切り文字として使う
pagerSelectorElement used to populate the populate the pager. By default, the pager is appended to the bx-viewport

コントロール機能

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

自動機能

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

カルーセル機能

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

基本的なDemo