今回はこの部分について解説してみたいと思います。
カルーセル
この上部のボタンを押したりドラッグすると動く一覧？は、カルーセルと呼ばれるものです。本来は自動で動くようにするのですが、武蔵浦和なびでは自動で動かないような設定にしています。カルーセル（carousel）はメリーゴーランドや回転木馬などのくるくる回転するもののことを指しており、WEBの世界では自動で項目が横にスライドしているパーツのことを指します。
複数の見せたい項目があるけど、スペース的に。。。っというときに、自動でスライドさせることで省スペースで多数のコンテンツを見せることができます。ただし、「動き」があることでそちらが気になり、メインで見せたいものから目が離れてしまったり、ユーザが見ているときに見せたいものが見えていないことなど欠点もありますね。
さて、このカルーセルですが、武蔵浦和なびではJQueryのOwl Carouselを使用しています。使い方は比較的簡単で、Owl Carouselのページよりファイルをダウンロード。ダウンロードしたファイルの中のowl-carouselフォルダの中にある「owl.carousel.min.js」と「owl.carousel.css」と「owl.theme.css」を使います。※自分でスタイルを作る場合は「owl.theme.css」は不要です。
この３つのファイルとJQueryをページ内でインクルードします。
<link rel="stylesheet" href="/common/css/owl.theme.css"> <link rel="stylesheet" href="/common/css/owl.carousel.css"> <script type="text/javascript" src="/common/js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="/common/js/owl.carousel.min.js"></script>
そして、カルーセルの設定はこのような感じです。私はフッター部分で宣言しています。
$('.owl-carousel').owlCarousel({
slideSpeed : 2000,
autoPlay : false,
scrollPerPage : true,
});
簡単に説明します。
slideSpeed：自動でスライドさせるときの時間間隔
autoPlay：自動スライドさせるかどうかのフラグ
scrollPerPage：falseにするとスライドの動きが１つずつになります。
ちなみに、他にも以下のようなパラメータがあります。
items：並べる個数
rewindSpeed：アイテムが最初にもどるスピード
responsive：レスポンシブにする
この辺りはマニュアルを読んだ方が良いですね。また検索すると日本語の解説ページもあるのでその辺をみると良いと思います。
そして、実際のデータ部分は以下のようになります。
<div class="owl-carousel"> <div class="item"> /* カルーセルの各項目の内容 */ </div> <div class="item"> /* カルーセルの各項目の内容 */ </div> ・ ・ ・ </div>
先のカルーセルの設定で使ったclass名と同じクラス名のDivタブを用意し、その中に「item」というクラスのDivを項目分用意する感じですね。武蔵浦和なびの場合は、この部分にPHPによるデータ取得処理・ループ処理を持ってきてプログラムで生成させています。
これで準備は完了。あとはスタイルの調整等を行えばカルーセルの出来上がりです！