jQuery:Cycle2プラグインでスライダーを実現する

Cycle2というとても使いやすい、jQueryプラグインがあります。 幾つか詰まった点があったのでここで紹介します。

基本的な使い方

まず、jQueryとこのプラグインを読み込みます:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

次に画像タグを以下のように<div>で括ります:

<div class="cycle-slideshow">
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

imgをaタグで囲みたい場合

data-cycle-slides属性を使って<a>タグをスライド対象にするように指定します:

<div class="cycle-slideshow"
     data-cycle-slides="a">
     <a href="#">
       <img src="http://malsup.github.io/images/p1.jpg">
     </a>
     <a href="#">
       <img src="http://malsup.github.io/images/p2.jpg">
     </a>
</div>

オーバーレイとキャプションを表示する

<div class="cycle-overlay"></div>を追加し、<a>タグの属性に表示内容を設定します:

<div class="cycle-slideshow"
     data-cycle-slides="a">
     <div class="cycle-overlay"></div>
     <a href="#"  data-cycle-title="タイトル1" 
            data-cycle-desc="説明1">
       <img src="http://malsup.github.io/images/p1.jpg">
     </a>
     <a href="#"  data-cycle-title="タイトル2" 
            data-cycle-desc="説明2">
       <img src="http://malsup.github.io/images/p2.jpg">
     </a>
</div>

<a>を使ってない場合、属性は<img>タグに指定してください

横にスライドする

data-cycle-fxでこのように指定します:

<div class="cycle-slideshow"
     data-cycle-fx="scrollHorz"
>

横にスライドするのが、aのタグだとうまくいかない場合

scrollHorzを指定すると、通常は画像が右から左にスクロールしますが、<img>タグを<a>タグで囲っている場合、 画像が右上から拡大する感じで広がります。これはどうもバグっぽいのですが、以下の次のCSSを追加すると治ります:

<style>
.cycle-slideshow a{
  width: 100%;
  height: auto;
}
</style>