すべてのカテゴリ

# Webサイトにカルーセルを実装しました！想像以上に難しかった制作記録本日は、制作中のWebサイトに「カルーセル」を実装しました。カルーセルとは、複数の画像やカードを横方向へスライドさせて表示する仕組みのことです。店舗や施設などの写真をすべて一度に並べると、ページが長くなったり、情報量が多く見えたりします。カルーセルを使えば、限られたスペースの中で複数の写真を見せられるため、店舗紹介や制作実績などにも活用できます。今回は店舗内の写真を見やすく紹介するために取り入れましたが、完成するまでの調整が想像以上に難しかったです。## Swiperを使ってカルーセルを実装今回のカルーセルには「Swiper」というライブラリを使用しました。Swiperは、Webサイトにスライド機能を追加できるライブラリです。HTMLでスライドの構造を作り、CSSで見た目を整え、JavaScriptで動き方を設定します。大まかな仕組みは、次のようになっています。* カルーセル全体を囲む要素* スライドをまとめる要素* 1枚ずつのスライド* 現在位置を表すページネーション* カルーセルの動きを設定するJavaScriptただ写真を横に並べるだけではなく、Swiperで決められたクラスを正しく指定する必要があります。HTML・CSS・JavaScriptのどれか一つでも設定が合っていないと、横並びにならなかったり、スライドしなかったりするため、確認する部分が多くありました。## 写真の大きさをそろえるカルーセルに使用する写真は、それぞれ縦横の比率が異なります。そのまま表示すると、カードごとに高さが変わり、全体の