[jQuery]スライドショーの作り方をわかりやすく紹介！[コピペで完成]
（2020/10/12更新）
みなさんこんにちは！ワトスンです。
今回は、、
といった疑問に答えます。
■読んでほしい人
Webサイト制作初心者の方で、スライドショーを実装してみたいという方
前置きはいらないと思うので早速、実装の仕方を見ていきましょう。
スライドショーを作る３つの手順＋
することは大きく分けて以下の3ステップです。
①jＱueryを読み込む。
②htmlファイルにスライドショーで使いたい写真を指定する。
③cssで調整する。
この３つをすれば実装できます。それぞれ作業は単純なので安心してください。
jQueryを読み込む
Jqueryにはスライドショーを実装できる物がたくさんありますが、今回はその中でもトップ人気の「swiper.js」を使用した実装方法をご紹介します。
以下のソースを＜head＞＜/head＞内にコピペして下さい。読み込みはこれだけでオッケーです！
|
1 2 3 4 5 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>//jquery全体を使用可能にするためのリンク <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">//swiperのcssを読み込み <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>//swiperのjqueryを読み込み |
HTMLを記述する
今回は画像をスライドさせるスライドショーを作ります。
ですので、HTMLで画像など必要なコードを記述していきます。
記述する場所は自分がスライドショーを置きたい場所に指定して下さい。
フッターのすぐ上に設置したければ、＜footer＞のすぐ上に記述して下さい。
以下↓を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- Swiper START --> <div class="swiper-container">//class名合わせる <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="/images/1pc.png"> </div> <div class="swiper-slide"> <img src="/images/2pc.png"> </div> </div> <div class="swiper-button-prev"></div>//class名合わせる <div class="swiper-button-next"></div>//class名合わせる <div class="swiper-pagination"></div>//class名合わせる </div> <!-- Swiper END --> |
imgには表示したい画像を入れて、表示したいだけ増やしていって下さい。
|
1 2 3 4 |
<div class="swiper-slide"> <img src="/images/1pc.png"> </div> |
これでひとかたまりです。画像を増やしていく際はこのコードをコピペして増やしていきます。
CSSで調整する
最初の段階で、swiper.cssを読み込んでいるため新たにCSSを記述する必要はありません。
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">//swiperのcssを読み込み |
しかしWebサイトによってボタンの色やスライドの間隔を変更したい場合などがあると思います。
その際は、CSSファイルにclass名を指定して記述していけばOKです。
＊記述したCSSが効かない場合は”!important”で強調しましょう。
この記述も必要でした！
また、レスポンシブ対応させるためには、オプションを使用する場合は以下の記述を＜head＞＜/head＞内または＜footer＞の直前に、以下の記述を追加して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script> var swiper = new Swiper('.swiper-container', {//class名合わせる slidesPerView: 3, spaceBetween: 30, loop: true, breakpoints: {//レスポンシブのbreakpoints 440: { slidesPerView: 2, spaceBetween: 10 }, }, autoplay: {//スライドのスピードなどオプション delay: 3000, stopOnLastSlide: false, disableOnInteraction: false, reverseDirection: false }, navigation: { nextEl: '.swiper-button-next',//class名合わせる prevEl: '.swiper-button-prev',//class名合わせる }, pagination: { el: '.swiper-pagination',//class名合わせる type: 'bullets', clickable: true } }); </script> |
この記述がないとswiper.jsが動かないので気をつけましょう！
いかがだったでしょうか。
今回は「swiper.js」を例にスライドショーを作りました。意外と簡単にできるのでぜひ試してみて下さい！
なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！
以上です。
