プログラミング

[jQuery]スライドショーの作り方をわかりやすく紹介![コピペで完成]

(2020/10/12更新)
みなさんこんにちは!ワトスンです。
今回は、、

スライドショーってどうやって実装するの?結構難しそうだけど具体的にどうすればいい?

といった疑問に答えます。
 

■読んでほしい人
Webサイト制作初心者の方で、スライドショーを実装してみたいという方
 

前置きはいらないと思うので早速、実装の仕方を見ていきましょう。

スライドショーを作る3つの手順+

することは大きく分けて以下の3ステップです。
 

①jQueryを読み込む。

②htmlファイルにスライドショーで使いたい写真を指定する。

③cssで調整する。
 

この3つをすれば実装できます。それぞれ作業は単純なので安心してください。
 

jQueryを読み込む

Jqueryにはスライドショーを実装できる物がたくさんありますが、今回はその中でもトップ人気の「swiper.js」を使用した実装方法をご紹介します。
 

以下のソースを<head></head>内にコピペして下さい。読み込みはこれだけでオッケーです!

HTMLを記述する

今回は画像をスライドさせるスライドショーを作ります。
ですので、HTMLで画像など必要なコードを記述していきます。
 

記述する場所は自分がスライドショーを置きたい場所に指定して下さい。
 

フッターのすぐ上に設置したければ、<footer>のすぐ上に記述して下さい。
 

以下↓を記述します。

imgには表示したい画像を入れて、表示したいだけ増やしていって下さい。

これでひとかたまりです。画像を増やしていく際はこのコードをコピペして増やしていきます。

CSSで調整する

最初の段階で、swiper.cssを読み込んでいるため新たにCSSを記述する必要はありません。

しかしWebサイトによってボタンの色やスライドの間隔を変更したい場合などがあると思います。
その際は、CSSファイルにclass名を指定して記述していけばOKです。
*記述したCSSが効かない場合は”!important”で強調しましょう。

この記述も必要でした!

また、レスポンシブ対応させるためには、オプションを使用する場合は以下の記述を<head></head>内または<footer>の直前に、以下の記述を追加して下さい。

この記述がないとswiper.jsが動かないので気をつけましょう!
 

いかがだったでしょうか。
今回は「swiper.js」を例にスライドショーを作りました。意外と簡単にできるのでぜひ試してみて下さい!
 

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

関連記事