使い勝手のいい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 | スライド間のマージン |