【swiper】スライドショーの画像をPCとモバイル用で変更

モバイルでは丁度いいサイズでも、PC端末で表示すると、画面いっぱいに画像が出てきて見苦しかったので、それぞれ画像を分けることにしました。

swiper については他にも記事にしているのでご参照ください。

概要

サムネイル付きスライド

ページネーションが途中で消える問題

画像の準備
HTML
1. PC用のHTML用意
2. モバイル用のHTML用意
CSS
参考にしたサイト

画像の準備

私はヘッダーにスライドショーを設置していたのですが、1440/700だと、モバイルでは丁度良くても、PCだとうるさくなってしまうので、
画像自体は、1440/300にして、2×で書き出しました！

300だと少し狭かったので、CSSで書き替えましたが、400くらいがちょうどよさそうです。

HTML

PC用のHTML用意

<!-- Sliderを包むコンテナ要素 -->
<div class="swiper-container">
  <!-- スライド要素を包む要素 -->
  <div class="swiper-wrapper">
    <!-- 各スライド -->
    <div class="swiper-slide"><img src="/img/画像">Slide 1</div>
    <div class="swiper-slide"><img src="/img/画像">Slide 2</div>
    <div class="swiper-slide"><img src="/img/画像">Slide 3</div>
  </div>
</div>
</div>

スライダーの必須コードを書きます。

これを新しいdivで囲い、クラスを付けます。

<div class="pc-img">
<div class="swiper-container">
  <!-- スライド要素を包む要素 -->
  <div class="swiper-wrapper">
    <!-- 各スライド -->
    <div class="swiper-slide"><img src="/img/画像">Slide 1</div>
    <div class="swiper-slide"><img src="/img/画像">Slide 2</div>
    <div class="swiper-slide"><img src="/img/画像">Slide 3</div>
  </div>
</div>
</div>

モバイル用のHTML用意

同じようにモバイル用の画像用のHTMLを作成します。

<div class="mp-img">
<div class="swiper-container">
  <!-- スライド要素を包む要素 -->
  <div class="swiper-wrapper">
    <!-- 各スライド -->
    <div class="swiper-slide"><img src="/img/画像">Slide 1</div>
    <div class="swiper-slide"><img src="/img/画像">Slide 2</div>
    <div class="swiper-slide"><img src="/img/画像">Slide 3</div>
  </div>
</div>
</div>

画像はPCとモバイル用でそれぞれ違うものを使用し、パスを書いていきます。

スライドを複数設置したい場合は、クラスやidを違うものに指定する

CSS

CSSを書いていきます。

PC用のCSSを書いていきます。

下記は例です。それぞれ変えてください！

.swiper-box1 {
  /*スライダーの幅と高さを調整*/
  width: 100%;
  height: auto;
}
/*スマホ表示の画像の大きさ*/
.swiper-slide.mp img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1440/700;
  object-fit: cover;
}
/*PC表示の画像の大きさ*/
.swiper-slide.pc img{
  width: 100%;
  height: auto;
  aspect-ratio: 1440/400;
  object-fit: cover;
}

メディアクエリを書いていきます。

/*モバイル用の画像とPC用の画像で分ける*/
@media screen and (min-width: 481px) {
.pc-img { 
  display: block; 
}
.mp-img .swiper-box1 {
   display: none; 
}
}

@media screen and (max-width: 480px) {
  .mp-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}

これでなんとか行けると思います。

最初うまくいかなかったので、481以上と480以下と書いていきました！

できない場合は教えてください！

参考にしたサイト

ありがとうございました！

display:none が効かない時の対処法 | 飯田市ホームページ制作デザインスタジオiR｜WEBデザイン、チラシ・パンフレット制作

画像の準備

HTML

PC用のHTML用意

モバイル用のHTML用意

CSS

参考にしたサイト

コメント