こんにちは！
今日はタイトル通り、複数ある画像をスライドさせて行く実装方法だよ！！^o^
今回はslickっていうプラグインを使うよ！
早速slickをダウンロードしよう！右上にある「get it now」のボタンからダウンロードできるよ！
http://kenwheeler.github.io/slick/
次にダウンロードしたフォルダを任意の場所に設置しよう！
やることはたったの３つ！！！
１、以下のコードを記述！
置いた場所によってパスを変えてね！
|
1 2 3 |
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="./js/jquery-migrate-1.4.1.min.js"></script> <script type="text/javascript" src="./js/slick.min.js"></script> |
２、次にスライドさせる要素の作成！
|
1 2 3 4 5 |
<div class="slick_b"> <div><img src="画像のパス" /></div> <div><img src="画像のパス" /></div> <div><img src="画像のパス" /></div> </div> |
３、最後に上の要素を動かす処理を記述！
|
1 2 3 4 5 |
<script type="text/javascript"> $(function() { $('.slick_b').slick(); }); </script> |
たったこれだけでスライドさせることができるよ！
スライドさせるプラグインは他にもあるけど、slickが一番導入しやすかった！
slickには最後の要素を動かす処理内に色々記述することでもっといろんな事ができるみたいだから興味あったら調べてみてね！
ではまたー！^o^ノ