Carousel機能を実装できるSlickを試してみました。
公式サイトは以下のURLから参照できます。
公式サイト
http://kenwheeler.github.io/slick/
必要なファイルはページの下の方にあるDownload Nowボタンからダウンロードできます。
DownloadしたZipを解凍するとslickフォルダがあるのが確認できると思います。
このslickフォルダに必要なファイルが揃っているみたいです。
一番シンプルなパターンですが次のコードで動作を確認できました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</head>
<body>
<div class="single-item">
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
</div>
<script>
$(document).ready(function(){
$('.single-item').slick();
});
</script>
</body>
</html>
これでyour content 1だけが表示されます。
サンプルのようにボタンとが表示されていませんがクリックしながら横スライドするとyour content 2やyour content 3に切り替えることができました。
ひとまず動作することは確認できたので後は公式サイトに記載されたサンプルコードを見ながらカスタマイズしていけると思います。