使い勝手のいいjQuery製のスライダーを2つ紹介します。どちらもレスポンシブサイトに対応しているのでスマホ表示もOKです。
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: | 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 が必須 |
| 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 | 数値 カルーセルが動くときに移動するアイテムの数 |
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' 「full」の場合、各スライドに対してページャーが生成されます。 'short' の場合、「1 / 5」のようなページャーになります。 |
| pagerShortSeparator | / | pagerTypeがshortの時、区切り文字として使う |
| pagerSelector | ページャーを設定するために使用される要素。 デフォルトではページャーは 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 | スライド間のマージン |
