レスポンシブに対応した多機能プラグイン「slick.js」のご紹介です。

slick.js

http://kenwheeler.github.io/slick/

個人的には、思ったようにしようとすると少しコツがいるな、という感じでした。

まずはjQueryとslick.js本体を読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="slick-1.5.7/slick/slick.min.js"></script>

次にCSSを読み込み

<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick-theme.css"/>

スライドさせたい画像等のコンテンツをbodyタグ内に記述します。

<ul class="your-class">
    <li>
        コンテンツ1
    </li>
    <li>
        コンテンツ2
    </li>
</ul>

最後にスライドショーを実行するスクリプトを記述します。

<script type="text/javascript">
<!--//
$(document).ready(function(){
    $('.your-class').slick();
});
//-->
</script>

slick.jsにはカルーセルで欲しい機能がほぼオプションで指定できます。
詳しくは公式ページをご覧ください。

オプションを指定して実行

$('.your-class').slick({
    autoplay: true,      //オートプレイ
    autoplaySpeed: 2000, //オートプレイの速度(ms)
    arrows: true,        //矢印の表示
    cssEase: "ease-out", //アニメーションの設定（ease,linear,ease-in,ease-out,ease-in-out）
    dots: true,          //ドットナビゲーションの表示
    infinite: true,      //無限ループ
    slidesToScroll: 1,   //スライド単位
    slidesToShow: 1,     //一度に見せるスライドの数
});

デフォルトの設定で実行させるにはこれだけで十分ですが、このままだと表示領域が画面一杯だったり、Prev/Nextの矢印表示を設定しても白背景だと見えない等の問題があります。
そのため、少しカスタマイズが必要な点もあるのではないでしょうか。

レスポンシブ対応

slickはレスポンシブに対応することが出来ます。
オプションresponsiveにbreakpointを設定して指定サイズに対応した設定を記述します。

以下の例では通常スライドを5つ表示し、3つずつスクロール、ウィンドウサイズが800px以下なら3つ表示の1つずつスクロール、480px以下ならスライド表示は1つ、という設定をしています。

$('.your-class').slick({
    slidesToShow: 5,
    slidesToScroll: 3,
    responsive: [
        {
            breakpoint: 800,
            settings: {
                slidesToShow: 3,
                slideToScroll: 1
            }
        },
        {
            breakpoint: 480,
                settings: {
                slideToShow: 1
            }
        }
    ]
});

respondToオプション

レスポンシブに対応する際、breakpointを設定してDevToolを使って幅を変更し検証しているが表示が変わらない！というご相談をいただきました。
その際、ポイントはrespondToオプションでした。
ご相談いただいた件ではsliderを設定すれば解決しました。
breakpointをきちんと設定しているのに反映されない…という場合はこちらを設定してみてください。

カスタマイズ

まず、リストスタイルを初期化します。

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

通常、幅が画面一杯になるので調整します。

.your-class {
    width: 350px;
    margin: 0 20px;
}

Prev/Nextの矢印がデフォルト白なので変更します。

.slick-prev:before, .slick-next:before {
    color: #666;
}

その他、ナビゲーションのドット表示位置を調整したいとき

.slick-dots {
    bottom: -30px;
}

ドットの色を変更したいとき

.slick-dots li button:before {
    color: #0000ff;
}

ドットがアクティブの状態の色を変更したいとき

.slick-dots li.slick-active button:before {
    color: #ff6347;
}

最後に注意点ですが、slick-theme.cssはなるべくテキストエディタでは開かないようにしましょう。
メモ帳なら大丈夫なようですが、私が使っているテキストエディタで一度開くと、ナビゲーションのドットが文字化けしてしまいました。