【デイトラ学習記録】Web制作コース　旧課題中級編 DAY52 スライダー（カルーセル）を作る

2023年8月9日2023年11月10日

こんにちは、ここぽてとです。本日は作成したホームページにスライダーを作っていきます！

ここぽてと

ホームページによくある画像をスライドすると違う画像がでてくるやつだね！

こちらは、javascriptライブラリを使って作るのですが、簡単そうに見えていたのですが、思うようにカンプ通りにできず、かなり苦戦しました…エラーを見て不具合を見つけて直せたのですが、とても時間をかかりました…でも時間がかかってもエラーを見て直せるって結構成長してるかも？

今回はメインビジュアルをスライダーに変更していく作業です。頑張っていきます。

スライダーの作り方

今回は、Swiperを使ってスライダーを作りました。javascriptライブラリに掲載されているコードを貼っていくだけで、簡単にスライダーは完成しました！

step1.画面のトップから”Get started”をクリック

Swiperから”Get started”をクリックして”Getting Started With Swiper”というページに飛びます。

step2. ”Use Swiper from CDN”の下にあるコードをコピー

“Getting Started With Swiper”に”Use Swiper from CDN”の見出しのところにコードがあります。

<head>
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
</body>

link…の方は、</head>の直前に、script…の方は、</body>の直前に書けばOK。

Step3. “Add Swiper HTML Layout”の下にあるコードをHTMLに張り付ける

更に下の方に行くと”Add Swiper HTML Layout”という見出しがあるので、その下にあるコードをコピペして、HTMLのスライダーしたい箇所に貼り付けます。

クラス名	意味
`swiper`–`slide`	スライド画面のこと
`swiper`–`pagination`	スライド画面下部の小さな丸のこと
`swiper-button-prev`	スライド画面横の左側にある戻るボタン
`swiper-button-next`	スライド画面の右側の横にある進むボタン
`swiper-scrollbar`	pagenationの下部にあるスクロールバー

コードの中にこれらのクラス名がありますが、スクロールバーなど必要ない場合は、消してもOKです。

Step.4 VScodeでjsというフォルダを作成して、javascriptのファイルを作成

VScodeを開いて、javascriptのファイルの拡張子は「.js」で保存します。そのファイルがきちんと動くかどうか確認するために、jsファイルに以下のコードを入力して保存します。

alert('テスト')

Go liveで確認して、サイトにアクセスして、ポップアップで画面に「テスト」と表示されれば、OKです。

Step.5 ”Initialize Swiper”のコードをコピーしてjavascriptファイルに貼り付ける

Step3.で”Add Swiper HTML Layout”の下にあるコードをHTMLに貼り付けたと思いますが、スクロールバーなど消した場合、こちらのコードのスクロールバーのコードも消去しておきます。

これで、スライダー完成です！すごい、めっちゃ簡単でした！あとは、

 <div class="swiper-slide">Slide 1</div>

のSlide1のところに以前作っていたdivクラスのメインビジュアルを入れるだけです！

スライダーをカンプ通り装飾する

デベロッパーツールを確認しながら作成していく

デザインカンプのアローアイコンやページネーションは、Swiper標準のデザインと違うため、ブラウザのデベロッパーツールで該当のCSSの値を確認して作成していきます。ページネーションの余白やアローアイコンの大きさなど確認して設置していきました。

アローアイコンをインナー幅で揃える

アローアイコンの位置は、ヘッダーのインナー幅に揃えたいので、swiper-button-prevクラスとswiper-button-nextクラスを一度中央基準で配置し、インナー幅に戻すイメージです。

今回のヘッダーのインナー幅は、1200pxと定義されているので、swiper-button-prevクラスは”left: calc(50% – 600px);” にしてあげることで中央(50%)から左に600pxという調整が可能です。

.swiper-button-prev{
 left:calc(50% - 600px);
}

.swiper-button-next{
 right:calc(50%-600px);
}

まとめ＆感想

今回は、作成したホームページにスライダーを追加していきました！javascriptライブラリ(今回はSwiper)を使って作りましたが、スライダーの導入自体はとても簡単でした！ただデベロッパーツールを確認しながらカンプ通りにするのがなかなかうまくいかず疲れました。解説動画を見ると、「そういうことか！」ととてもわかるのですが、一人ですべて作成となるとうまくいかないです…自分のホームページを作成するだけならなんとかできそうなので、ポートフォリオサイトにスライダーをつけてみたいと思います。

よかったらシェアしてね！