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

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

新規登録して質問してみよう
ただいま回答率
86.02%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

Q&A

受付中

Swiper 画面幅リサイズでずれる

ztj
ztj

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

0回答

0グッド

1クリップ

975閲覧

投稿2022/07/20 11:11

前提

Swiperを使って、アクティブ時だけ大きくなるスライドを作成しています。
最大幅設定のある.sample-slider-wrapperを基準にactiveのスライドが左揃えで、その他スライドは画面幅に応じて表示されるレイアウトです。
https://codepen.io/samiyo/pen/rNdmarb

実現したいこと

PC:各スライド幅310px、activeスライドのみ幅600px
SP:activeスライド幅100%(オプションでなくCSSで指定)

発生している問題・エラーメッセージ

codepenを見ていただくとわかりやすいのですが、読み込み時は正しい位置にスライドがありますが、2枚目からズレが発生してしまいます。
codepenでは2枚目以降すべてにズレが生じますが、私のテスト環境では画面をリサイズすると1,4,5枚目にズレが生じます。
codepenですと、一度画面幅を縮めてから再度さらに縮めると近い挙動(ランダムにズレる)を確認できるかと思います。

該当のソースコード

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 2<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"> 3<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> 4<div class="sample"> 5 <div class="sample-slider-wrapper"> 6 <div class="swiper-container sample-slider"> 7 <div class="swiper-wrapper"> 8 <div class="swiper-slide sample__list"> 9 <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure> 10 <div class="sample__text"> 11 <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p> 12 </div> 13 </div> 14 <div class="swiper-slide sample__list"> 15 <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure> 16 <div class="sample__text"> 17 <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p> 18 </div> 19 </div> 20 <div class="swiper-slide sample__list"> 21 <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure> 22 <div class="sample__text"> 23 <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p> 24 </div> 25 </div> 26 <div class="swiper-slide sample__list"> 27 <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure> 28 <div class="sample__text"> 29 <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p> 30 </div> 31 </div> 32 <div class="swiper-slide sample__list"> 33 <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure> 34 <div class="sample__text"> 35 <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p> 36 </div> 37 </div> 38 </div> 39 <div class="swiper-button-prev"></div> 40 <div class="swiper-button-next"></div> 41 </div> 42 </div> 43</div>

CSS

1.sample { 2 overflow: hidden; 3 padding-bottom: 250px; 4} 5@media screen and (max-width: 767px) { 6 .sample { 7 margin-bottom: 60px; 8 padding-bottom: 0; 9 } 10} 11@media screen and (max-width: 767px) { 12 .sample { 13 padding: 0 20px; 14 } 15} 16.sample-slider { 17 overflow: visible; 18 position: relative; 19} 20.sample-slider-wrapper { 21 max-width: 1260px; 22 margin: 0 auto; 23} 24.sample .swiper-slide { 25 width: 310px; 26} 27.sample .swiper-slide.swiper-slide-active { 28 max-width: 600px; 29 width: 100%; 30} 31@media screen and (max-width: 767px) { 32 .sample .swiper-slide.swiper-slide-active { 33 max-width: 100%; 34 } 35} 36.sample__list { 37 display: flex; 38} 39@media screen and (max-width: 767px) { 40 .sample__list { 41 display: block; 42 } 43} 44.sample__thumb { 45 width: 100%; 46 border: 1px solid #9B9B9B; 47} 48.sample__thumb:after { 49 display: block; 50 content: ""; 51 width: 100%; 52 height: 100%; 53 background: rgba(155, 155, 155, 0.5); 54 position: absolute; 55 top: 0; 56 left: 0; 57} 58.sample__thumb img { 59 width: 100%; 60} 61.sample__text { 62 display: none; 63} 64.sample .swiper-slide.swiper-slide-active .sample__thumb:after { 65 display: none; 66} 67@media screen and (max-width: 767px) { 68 .sample .swiper-slide.swiper-slide-active .sample__thumb { 69 margin-bottom: 15px; 70 } 71} 72.sample .swiper-slide.swiper-slide-active .sample__text { 73 display: block; 74 position: absolute; 75 left: calc(100% + 40px); 76 z-index: 20; 77 max-width: 482px; 78 width: 100%; 79 top: 120px; 80} 81@media screen and (max-width: 767px) { 82 .sample .swiper-slide.swiper-slide-active .sample__text { 83 position: relative; 84 width: 100%; 85 left: 0; 86 top: 0; 87 } 88} 89 90@media screen and (max-width: 767px) { 91 .sample .swiper-slide-next, 92.sample .swiper-slide-prev { 93 opacity: 0; 94 } 95} 96.sample .swiper-button-prev { 97 left: -30px; 98 top: 30%; 99} 100@media screen and (max-width: 767px) { 101 .sample .swiper-button-prev { 102 left: -15px; 103 top: 30%; 104 } 105} 106.sample .swiper-button-next { 107 top: 30%; 108 right: 0; 109} 110@media screen and (max-width: 767px) { 111 .sample .swiper-button-next { 112 right: -15px; 113 left: auto; 114 top: 30%; 115 } 116}

JavaScript

1const mainSlides = document.querySelectorAll('.sample__list'); 2console.log(mainSlides.length); 3const sampleSlider = new Swiper(".sample-slider", { 4 loop: true, 5 loopedSlides:mainSlides.length, 6 slidesPerView: 'auto', 7 grabCursor: true, 8 spaceBetween: 30, 9 watchSlidesVisibility: true, 10 resizeReInit: true, 11 offsetPxBefore: false, 12 watchActiveIndex: true, 13 navigation: { 14 nextEl: ".swiper-button-next", 15 prevEl: ".swiper-button-prev", 16 }, 17 pagination: { 18 el: '.sample-slider .swiper-pagination', 19 clickable: true, 20 } 21});

心当たりがあるとすればactive時と非active時にスライド幅を変えていることですが、
それによってリサイズ時もスライダー全体の幅は変わらないのでは?(スライド幅は固定のため)と考えています。
また、transform:scaleで指定するのが確実かとは思いますが、少し複雑な仕様にしたいため固定幅で指定しています。

ご教授いただけると助かります。
よろしくお願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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