モーダルウィンドウ内にスライダーを設置したい

Question

モーダルウィンドウ内にスライダーを設置したいです。
ほとんどは実装はできているのですが、ブラウザ幅720pxぐらいからモーダル画面が見切れてしまいレスポンシブ対応ができません。
swiper.jsの実装がうまくいっていない気がします。

・スライドを削除するとブラウザ内にモーダル画面が綺麗に収まる
・スライド部分をモーダル外で実装するとスライダーはブラウザ幅と共に小さくなります（正常に動く）。

使用しているプラグインは下記となります。
swiper.js
modaal.js

お手数お掛け致しますが、
ご教示お願いいたします。

<a class="btn modal" href="#modal">モーダル</a>

<div id="modal">
  <div class="slider">
    <div class="swiper-wrapper">
      <!-- スライド -->
      <div class="swiper-slide">
        <img src="https://placehold.jp/350x250.png" alt="">
　　　　　　　　　　　</div>
      ・
      ・
      ・
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

//スライダー
  const swiper = new Swiper(".slider", {
    speed: 500,
    loop: true,
    slidesPerView: 1.5,
    spaceBetween: 10,
    centeredSlides : true,
    breakpoints: {
      1024: {
        slidesPerView: 3.5,
      }
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  });

  swiper.update()

//モーダルウィンドウ
  $(".modal").modaal({
    width:800
  });

Answer 1

ブラウザ幅720pxぐらいからモーダル画面が見切れてしまいレスポンシブ対応ができません。

  $(".modal").modaal({
    width:800
  });

ここで固定しているからでは？

Comments

[hayakawatakuma]

ご回答ありがとうございます！
こちらのオプションの「800」はmax-width:800px;で吐き出されるので
問題ではございません。