Cycle2 スライドショーの決定版

Cycle2は数あるjQueryプラグインのスライドショーの中でも秀逸です。
設定が簡単で機能が豊富で、おまけにレスポンシブデザインにも対応しています。

設定方法の例

1：こちらのサイトからダウンロードします。
2：jQueryとCycle2のコードを記入。

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

3：展開したい場所にcycle-slideshowというクラス名をつけ、imageを指定します。
optionで効果を加えたいときはクラス名に続いてoption nameとその値を記述。
表示タイムを2秒、変化スピードを6秒、繰り返し2回で停止の場合は以下のように。

<div class="cycle-slideshow"
data-cycle-timeout="2000"
data-cycle-speed="6000"
data-cycle-loop=2
>
    <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>

2015/2/1(日) | information