メインエリア可変幅、サイドバー固定幅におけるswiperスライダー

  • 解決済 bigbang823

    (@bigbang823)


    5年、 5ヶ月前

    【html】
    <div class=”content”>
    <div class=”main_area”>ここにswiperスライダーを配置</div>
    <div class=”sidebar”></div>
    </div>

    【css】
    .content{display: flex; flex-wrap: wrap;}
    .main_area{flex:1;}
    .sidebar{width:240px;}

    上記の様な2カラムサイトでswiperスライダーを実装して、
    画面幅が1200px以上の時、
    スライダーの横幅が、
    <div class=”main_area”>の横幅サイズでなく、
    <div class=”content”>の横幅になってしまいます。

    https://test.cut-salon.jp/link4/
    こちらのサイトにあるようにslickスライダーだとちゃんと
    <div class=”main_area”>の横幅サイズで表示されます。

    swiperスライダーで<div class=”main_area”>の横幅サイズで表示させるにはどの様にすれば良いでしょうか？

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • CG

    (@du-bist-der-lenz)

    5年、 5ヶ月前

    比較確認は、メディアクエリの見直しからでしょうか

    ishitaka

    (@ishitaka)

    5年、 5ヶ月前

    こんにちは

    <script>
  var swiper = new Swiper('.swiper-container', {
   （省略）
  });
</script>

    ↓

    <script>
window.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.swiper-container', {
   （省略）
  });
}, false);
</script>

    では、どうでしょうか？

    なお、このフォーラムは、WordPress 本体（コア・アプリケーション）および wordpress.org で配布されているテーマとプラグインが対象となります。
    https://wpdocs.osdn.jp/フォーラムへようこそ

    あとは、JavaScript について質問できる他のフォーラムなどで聞かれた方がいいかと思います。

    トピック投稿者 bigbang823

    (@bigbang823)

    5年、 5ヶ月前

    ishitaka様

    度々、ありがとうございます。
    <div class=”main_area”>の画面幅になりました。

    >>このフォーラムは、WordPress 本体（コア・アプリケーション）および wordpress.org で配布されているテーマとプラグインが対象となります。

    了解しました。フォーラム違いなのにお答え頂きありがとうございましたm(_ _)m

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「メインエリア可変幅、サイドバー固定幅におけるswiperスライダー」には新たに返信することはできません。