質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

14596閲覧

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

naga_yuu

総合スコア8

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/17 10:08

編集2022/01/12 10:55

参考サイト:[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}

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

itagagaki

2021/04/29 10:29

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

回答1

0

ベストアンサー

こちらでどうでしょうか?
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}

投稿2021/05/01 06:23

編集2021/05/01 06:24
atk_3

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問