swiperファーストビュー時に画像が三分割されたりします

swiperを2つ設置しており、1つはメイン画像として1枚でSliderさせ、もう1つはギャラリーみたいな感じで3分割表示させております。
2つともうまく動いて問題ないのですが、タイトル通り、ファーストビュー時に1枚でSlider表示させてるメイン画像がうまく表示できません。
※更新おせばすぐ直りますが、なんとか最初に見える時でもきれいに見せたいです。

var mySwiper = new Swiper('.swiper-container'{
    pagination: '.swiper-pagination', 
    loop: true, 
    simulateTouch: true,
    slidesPerView: 3,
    slidesPerGroup: 1,
    spaceBetween: 30,
    speed: 800,
    centeredSlides: true,
    initialSlide: 1,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: 
    {
        780: {  
            slidesPerView: 1,
            slidesPerGroup: 1,
            spaceBetween: 10
        },
        960: {  
            slidesPerView: 2,
            slidesPerGroup: 1,
            spaceBetween: 20
        }
    }
  }
);

var mySwiper = new Swiper ('.slide .swiper-container', {

  loop: true, 
  speed: 600,
  slidesPerView: 1,
  spaceBetween: 10, 
  direction: 'horizontal',
  effect: 'slide',

  autoplay: {
    delay: 3000, 
    stopOnLast: false, 
    disableOnInteraction: true 
  },


  breakpoints: {

    980: {
      slidesPerView: 1,
      spaceBetween: 30
    },

    640: {
      slidesPerView: 1,
      spaceBetween: 20
    }
  },
});

        <div class="slide">

            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->

                    <div class="swiper-slide">
                        <figure>
                            <img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure>
                            <img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure>
                            <img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>

                </div>
            </div>
        </div>

        <div class="swiper-container-wrapper index_width">
            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide">
                        <img src="images/facility_img01.png" alt="" class="shape">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/facility_img02.png" alt="" class="shape">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/facility_img03.png" alt="" class="shape">
                    </div>
                </div>



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

    .swiper-container-wrapper {
        position: relative;
        margin: auto;
        margin: 20px;
        margin-bottom: 5em;

    }
    

    .swiper-container{
        width: 100%;
        max-width:1280px;
        padding:0;
        text-align: center;
    }

    .swiper-container .swiper-slide .mini-calendar{
        width: 100%;
        /* max-width: 420px; */
        max-width: 99%;
        margin: 0.1rem;
    }

    .prettyprint{
        border: none;
        background: #fafafa;
        color: #697d86;
    }

    .swiper-button-prev {
        background-image: url("../images/arrow01.png") !important;
    }

    .swiper-button-next {
        background-image: url("../images/arrow02.png") !important;
    }


    .swiper-button-prev02{
        margin-top: -25px;
    }

    .button-prev02{
        display: none!important;
    margin-top:0;
}

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

回答1件

ベストアンサー

同じ要素に2回 Swiper が適用されてしまっているのでおかしなことになっているのだと思います。
最初の new Swiper('.swiper-container', ...) で .slide .swiper-container にあたるスライドにも適用されてしまっています。

id 属性を設定し、new Swiper('#ID', ...) のようにしてしまえば良いかなと思います。

追記

html
1<div class="slide">
2
3    <!-- Slider main container -->
4    <div class="swiper-container" id="slider-1">
5        <!-- Additional required wrapper -->
6        <div class="swiper-wrapper">
7            <!-- Slides -->
8
9            <div class="swiper-slide">
10                <figure>
11                    <img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
12                </figure>
13            </div>
14            <div class="swiper-slide">
15                <figure>
16                    <img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
17                </figure>
18            </div>
19            <div class="swiper-slide">
20                <figure>
21                    <img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
22                </figure>
23            </div>
24
25        </div>
26    </div>
27
28</div>

html
1<div class="swiper-container-wrapper index_width">
2    <!-- Slider main container -->
3    <div class="swiper-container" id="slider-2">
4        <!-- Additional required wrapper -->
5        <div class="swiper-wrapper">
6            <!-- Slides -->
7            <div class="swiper-slide">
8                <img src="images/facility_img01.png" alt="" class="shape">
9            </div>
10            <div class="swiper-slide">
11                <img src="images/facility_img02.png" alt="" class="shape">
12            </div>
13            <div class="swiper-slide">
14                <img src="images/facility_img03.png" alt="" class="shape">
15            </div>
16        </div>
17
18        <!-- If we need navigation buttons -->
19        <div class="swiper-button-prev"></div>
20        <div class="swiper-button-next"></div>
21    </div>
22</div>
23<!-- swiper-container-wrapper -->

javascript
1var swiperSlider1 = new Swiper ('#slider-1', {
2  loop: true, 
3  speed: 600,
4  slidesPerView: 1,
5  spaceBetween: 10, 
6  direction: 'horizontal',
7  effect: 'slide',
8  autoplay: {
9    delay: 3000, 
10    stopOnLast: false, 
11    disableOnInteraction: true 
12  },
13  breakpoints: {
14    980: {
15      slidesPerView: 1,
16      spaceBetween: 30
17    },
18    640: {
19      slidesPerView: 1,
20      spaceBetween: 20
21    }
22  },
23});
24
25var swiperSlider2 = new Swiper('#slider-2', {
26    pagination: '.swiper-pagination', 
27    loop: true, 
28    simulateTouch: true,
29    slidesPerView: 3,
30    slidesPerGroup: 1,
31    spaceBetween: 30,
32    speed: 800,
33    centeredSlides: true,
34    initialSlide: 1,
35    pagination: {
36      el: '.swiper-pagination',
37      clickable: true,
38    },
39    navigation: {
40      nextEl: '.swiper-button-next',
41      prevEl: '.swiper-button-prev',
42    },
43    breakpoints: 
44    {
45        780: {  
46            slidesPerView: 1,
47            slidesPerGroup: 1,
48            spaceBetween: 10
49        },
50        960: {  
51            slidesPerView: 2,
52            slidesPerGroup: 1,
53            spaceBetween: 20
54        }
55    }
56  }
57);