モーダルウィンドウ内にスライダーを設置したいです。
ほとんどは実装はできているのですが、ブラウザ幅720pxぐらいからモーダル画面が見切れてしまいレスポンシブ対応ができません。
swiper.jsの実装がうまくいっていない気がします。
・スライドを削除するとブラウザ内にモーダル画面が綺麗に収まる
・スライド部分をモーダル外で実装するとスライダーはブラウザ幅と共に小さくなります(正常に動く)。
使用しているプラグインは下記となります。
swiper.js
modaal.js
お手数お掛け致しますが、
ご教示お願いいたします。
HTML
1<a class="btn modal" href="#modal">モーダル</a> 2 3<div id="modal"> 4 <div class="slider"> 5 <div class="swiper-wrapper"> 6 <!-- スライド --> 7 <div class="swiper-slide"> 8 <img src="https://placehold.jp/350x250.png" alt=""> 9 </div> 10 ・ 11 ・ 12 ・ 13 </div> 14 <div class="swiper-button-prev"></div> 15 <div class="swiper-button-next"></div> 16 </div> 17</div>
javascript
1//スライダー 2 const swiper = new Swiper(".slider", { 3 speed: 500, 4 loop: true, 5 slidesPerView: 1.5, 6 spaceBetween: 10, 7 centeredSlides : true, 8 breakpoints: { 9 1024: { 10 slidesPerView: 3.5, 11 } 12 }, 13 navigation: { 14 nextEl: ".swiper-button-next", 15 prevEl: ".swiper-button-prev" 16 } 17 }); 18 19 swiper.update() 20 21//モーダルウィンドウ 22 $(".modal").modaal({ 23 width:800 24 });

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/03/15 10:57