スライダーSwiperでのレイアウト崩れ

前提・実現したいこと

Swiperを実装したときに横スクロールバーが出てしまいます。
cssで横幅調整するとレイアウトは整いますが、何もない空白が右に伸びている状態は変わらない。
そもそもSwiperだけの仕様でなく、アドセンスなどの横幅を自動取得するjsでも同じことが起こるのかもしれません。

追記：effectが"cube","flip"のときに上記の現象が起きるようです

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

右スクロールバーが出る

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <link rel="stylesheet" href="/a.css"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div>  <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        effect: "flip",
        loop: true,
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    })
</script>

</body> </html>

試したこと

スライダーは正常に稼働

.swiper-container {
margin: auto;
max-width: 900px;
}

上記のcss設定すると
スライダー自体は900pxの中央寄せになるが、依然として右の空白と横スクロールバーは消えない

補足情報（FW/ツールのバージョンなど）

クローム、IE11、で確認

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

回答1件

ベストアンサー

こんにちは。
ご提示のコードを試してみたところ、下記の部分を削除するとスクロールバーが消えました。

HTML
1<div class="swiper-slide">Slide 1</div>
2<div class="swiper-slide">Slide 2</div>
3<div class="swiper-slide">Slide 3</div>
4... <!-- ←これ -->

投稿2020/07/10 01:34

Lhankor_Mhy

総合スコア36981

tonpoko

2020/07/10 03:43

回答ありがとうございます。本当ですね、余計なものを消したらスクロールバー消えました。しかし腑に落ちないことも。利用するライブラリに影響を受けずCSSで横幅を制御することは出来ないでしょうか?今回そこに時間をかけていたので・・。例えばswiper-containerの親要素を作りmax-widthを試しましたが解決しないんですよね。