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>
コメント&トラックバック
こちらから トラックバックすることができます。