カルーセルとは、直訳すると「回転木馬」でコンテンツや写真を、クリックやフリックでスライドさせる表現です。
いろいろな作者が作ったものがありますが、今回は slick というカルーセルの表現でかなり万能な機能を持ったjQueryプラグインをご紹介します。
実装のサンプルコードはこちら
<script type="text/javascript" src="/js/jquery/plugins/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery/plugins/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/js/jquery/plugins/slick/slick-theme.css"/>
<div class="demo_stage">
<h1>クリックして次へ（スワイプ可能）</h1>
<div class="your-class none">
<div class="demo_item color1">content 1</div>
<div class="demo_item color2">content 2</div>
<div class="demo_item color3">content 3</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.your-class').slick();
});
</script>
サンプルは以下のリンクから遷移します。
