狭い領域を効果的に活かせるコンテンツスライダーはよく案件に出てきます。高性能なカルーセルプラグイン「slick.js」は使い勝手がいいです。
まずはデモをご覧ください。
サンプルデモ・ダウンロード
デモでは左右の矢印をCSSでオリジナルに変更しております。
特徴
主な特徴としては以下があげられます。
・レスポンシブデザインに対応
・スマホのスワイプやタッチに対応
・IEでも動作可能（IE8以上）
柔軟に幅広い要件に対応できそうです。
設置方法
上部で、CSS、JSを読込
<link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.slick.min.js"></script>
続いてHTMLの記述、
<div class="carousel"> <div><img src="img/img01.jpg" alt=""></div> <div><img src="img/img02.jpg" alt=""></div> <div><img src="img/img03.jpg" alt=""></div> <div><img src="img/img04.jpg" alt=""></div> <div><img src="img/img05.jpg" alt=""></div> <div><img src="img/img06.jpg" alt=""></div> </div> <!--//carousel-->
最後に設定を記述します。
<script type="text/javascript">
$('.carousel').slick({
speed: 600, //スライドのスピード（初期値：300）
autoplay: true, //オート切り替え（初期値：false）
autoplaySpeed: 3000, //オート切り替えのスピード（初期値：3000）
dots: true, //黒ボッチ（ナビ）の表示（初期値：false）
swipe: false, //スワイプを有効にする（初期値：true）
useCSS: false, //CSSトランジションを有効にする（初期値：true）
touchMove: false, //スワイプ中のスライダーの移動を有効にする（初期値：true）
arrows: true, //矢印（ナビ）の有無（初期値：true）
slidesToShow: 3, //表示する要素の数値（初期値：1）
slidesToScroll: 3, //スライドで動かす要素の数値（初期値：1）
infinite: true, //スライドループの有無（初期値：true）
});
</script>
オプション例
豊富なオプションが用意されています。
スライドのスピード【speed: 600 】（初期値：300） オート切り替え【autoplay: true 】（初期値：false） オート切り替えのスピード【autoplaySpeed: 3000 】（初期値：3000） 黒ボッチ（ナビ）の表示【dots: true 】（初期値：false） スワイプを有効にする【swipe: false 】（初期値：true） CSSトランジションを有効にする【useCSS: false 】（初期値：true） スワイプ中のスライダーの移動を有効にする【touchMove: false 】（初期値：true） 矢印（ナビ）の有無【arrows: true 】（初期値：true） 表示する要素の数値【slidesToShow: 3 】（初期値：1） スライドで動かす要素の数値【slidesToScroll: 3 】（初期値：1） スライドループの有無【infinite: true 】（初期値：true）
詳しくは下記サイト等ご参考ください。
配布サイト
http://kenwheeler.github.io/slick/
参考サイト
http://cly7796.net/wp/javascript/plugin-slick/