Cycle2というとても使いやすい、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>