Swiper.js



http://idangero.us/swiper/

Swiper.jsはレスポンシブ対応のコンテンツスライダーとしておすすめです。

DEMOページにはオーソドックスなカルーセル以外にも、様々なタイプのサンプルが用意されています。

さらに、充実したAPIとコールバックによって様々な関数処理を実行することができます。

コールバックとは… 他関数の引数として、特定のタイミングで実行することができます。
例)「処理Aが終わった後に、処理Bを実行したい」

過去の使用実績としては、全画面タイプのスライドを6枚まで自動再生+マウスホイールでもページ送り、
最後のスライドに到達した時点でホイール判定を無効化し下部のコンテンツを見せる。
といったスライダーを実装しました。

基本のHTML構造としては下記。


CSSはこちら

Script部分はこんな感じ