<swiper.js>ウィンドウ幅を変えても画像幅を固定しておきたい。

参考サイト：[https://www.npa.go.jp/]

警察庁ウェブサイトのように、Swiperにおいて、PC表示時（画面幅700px以上)にウィンドウの幅を変えても画像の幅は変わらない様にしたいです。max-widthを設定したりすると、ウィンドウサイズ変更時に画像の間に隙間が出来たりしてしまい、なかなかうまくいきません。

今現在のコードはこんな感じです。参考サイトのようなスライダー表示にはなるのですが、画像の幅が可変してしまいます。画像の間に隙間を作らずに、画像サイズを固定しておきたいです。

HTML
1<div class="swiper-container">
2  <div class="swiper-wrapper">
3    <div class="swiper-slide">
4    <figure class="topicon">
5<a href="/">
6<img src="<?php bloginfo('template_directory'); ?>/img/sample.jpg" 　alt="サンプルリンク>
7<figcaption class="caption-about">サンプルリンク</figcaption>
8</figure></a></div>
9    <div class="swiper-slide">
10        <figure class="topicon">
11<a href="/">
12<img src="<?php bloginfo('template_directory'); ?>/img/sample.jpg" 　alt="サンプルリンク">
13<figcaption class="caption-about">サンプルリンク</figcaption>
14</figure></a></div>
15    <div class="swiper-slide">
16        <figure class="topicon">
17<a href="/">
18<img src="<?php bloginfo('template_directory'); ?>/img/sample.jpg" 　alt="サンプルリンク">
19<figcaption class="caption-about">サンプルリンク</figcaption>
20</figure></a></div>
21<div class="swiper-slide">
22<figure class="topicon">
23<a href="/">
24<img src="<?php bloginfo('template_directory'); ?>/img/sample.jpg" 　alt="サンプルリンク">
25<figcaption class="caption-about">サンプルリンク</figcaption>
26</figure></a></div>
27  </div>
28  <div class="swiper-button-prev" tabindex="2"></div>
29  <div class="swiper-button-next" tabindex="1"></div>
30  <div class="swiper-pagination" tabindex="-1"></div>
31</div>

Javascript
1<script>
2var swiper = new Swiper('.swiper-container', {
3  navigation: {
4    nextEl: '.swiper-button-next',
5    prevEl: '.swiper-button-prev',
6  },
7  loop: true,
8  breakpoints:{
9  700:{
10  slidesPerView: 1.5,
11  spaceBetween: 0,
12  initialSlide: 0,
13  centeredSlides : true
14  }
15  },
16  pagination: {
17      el: '.swiper-pagination',
18      type: 'bullets',
19      clickable: true,
20    },
21});
22</script>

CSS
1@media (min-width:700px) {
2    .swiper-container{
3        width: 100%!important;
4        max-width: 100%;
5    }
6    .swiper-container .swiper-slide img{
7        width: 100%!important;
8        max-width: 100%;
9    }
10    .topicon {
11        width: 100%!important;
12        max-width: 100%;
13      }
14      
15      .topicon img {
16        width: 100%!important;
17        max-width: 100%;
18      }
19      .topicon img:hover {
20        width: 100%;
21      }
22      .topicon figcaption {
23        z-index:999;
24        width: 100%;
25        height: 100%;
26      }
27}

よろしくお願いいたします。

itagagaki

2021/04/29 10:29

ご提示のコードをPenにコピペしてSwiper5を加えて画像のURLを変えてみてみましたが、おかしいところが見当たりません。どこかおかしいですか？ https://codepen.io/itagagaki/pen/wvgbqYG

行動規範の内容に同意します

回答1件

ベストアンサー

こちらでどうでしょうか？
slidesPerViewは1.5ではなくautoかと思います。

またテスト環境で試したのであれば参考サイトの画像をお借りしてローカルで確認していただくと近いものになるかと思います。

追記：

<main></main>などにmin-width: 1300px;も付与したら参考サイトっぽくなります。

javascript
1import $ from 'jquery';
2import Swiper from 'swiper';
3
4/**
5 * @constructor
6 */
7
8let swiper = undefined;
9export default class Test {
10	constructor() {
11		swiper = new Swiper('.swiper-container', {
12			loop: true,
13			breakpoints: {
14				700: {
15					slidesPerView: 'auto',
16					spaceBetween: 0,
17					initialSlide: 0,
18					centeredSlides: true,
19				}
20			},
21			navigation: {
22				nextEl: '.swiper-button-next',
23				prevEl: '.swiper-button-prev',
24			},
25			pagination: {
26				el: '.swiper-pagination',
27				type: 'bullets',
28				clickable: true,
29			},
30		});
31	}
32}
33
34

CSS
1
2@media (min-width:700px) {
3   .swiper-container{
4	  height: 100%;
5	  width: 100%;
6	  margin: 0 auto;
7    }
8   .swiper-container .swiper-slide {
9	  width: 1024px !important;
10	  text-align: center;
11    }
12}