Swiper 画面幅リサイズでずれる

前提

Swiperを使って、アクティブ時だけ大きくなるスライドを作成しています。
最大幅設定のある.sample-slider-wrapperを基準にactiveのスライドが左揃えで、その他スライドは画面幅に応じて表示されるレイアウトです。
https://codepen.io/samiyo/pen/rNdmarb

実現したいこと

PC：各スライド幅310px、activeスライドのみ幅600px
SP：activeスライド幅100%（オプションでなくCSSで指定）

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

codepenを見ていただくとわかりやすいのですが、読み込み時は正しい位置にスライドがありますが、2枚目からズレが発生してしまいます。
codepenでは2枚目以降すべてにズレが生じますが、私のテスト環境では画面をリサイズすると1，4，5枚目にズレが生じます。
codepenですと、一度画面幅を縮めてから再度さらに縮めると近い挙動（ランダムにズレる）を確認できるかと思います。

該当のソースコード

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
2<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
3<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
4<div class="sample">
5    <div class="sample-slider-wrapper">
6        <div class="swiper-container sample-slider">
7            <div class="swiper-wrapper">
8                <div class="swiper-slide sample__list">
9                    <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure>
10                    <div class="sample__text">                        
11                        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p>
12                    </div>
13                </div>
14                <div class="swiper-slide sample__list">
15                    <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure>
16                    <div class="sample__text">
17                        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p>
18                    </div>
19                </div>
20                <div class="swiper-slide sample__list">
21                    <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure>
22                    <div class="sample__text">                        
23                        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p>
24                    </div>
25                </div>
26                <div class="swiper-slide sample__list">
27                    <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure>
28                    <div class="sample__text">
29                        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p>
30                    </div>
31                </div>
32                <div class="swiper-slide sample__list">
33                    <figure class="sample__thumb"><img src="https://placehold.jp/699x235.png" alt=""></figure>
34                    <div class="sample__text">                        
35                        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキスト</p>
36                    </div>
37                </div>
38            </div>
39            <div class="swiper-button-prev"></div>
40            <div class="swiper-button-next"></div>
41        </div>
42    </div>
43</div>

CSS
1.sample {
2  overflow: hidden;
3  padding-bottom: 250px;
4}
5@media screen and (max-width: 767px) {
6  .sample {
7    margin-bottom: 60px;
8    padding-bottom: 0;
9  }
10}
11@media screen and (max-width: 767px) {
12  .sample {
13    padding: 0 20px;
14  }
15}
16.sample-slider {
17  overflow: visible;  
18  position: relative;
19}
20.sample-slider-wrapper {
21  max-width: 1260px;
22  margin: 0 auto;
23}
24.sample .swiper-slide {
25  width: 310px;
26}
27.sample .swiper-slide.swiper-slide-active {
28  max-width: 600px;
29  width: 100%;
30}
31@media screen and (max-width: 767px) {
32  .sample .swiper-slide.swiper-slide-active {
33    max-width: 100%;
34  }
35}
36.sample__list {
37  display: flex;
38}
39@media screen and (max-width: 767px) {
40  .sample__list {
41    display: block;
42  }
43}
44.sample__thumb {
45  width: 100%;
46  border: 1px solid #9B9B9B;
47}
48.sample__thumb:after {
49  display: block;
50  content: "";
51  width: 100%;
52  height: 100%;
53  background: rgba(155, 155, 155, 0.5);
54  position: absolute;
55  top: 0;
56  left: 0;
57}
58.sample__thumb img {
59  width: 100%;
60}
61.sample__text {
62  display: none;
63}
64.sample .swiper-slide.swiper-slide-active .sample__thumb:after {
65  display: none;
66}
67@media screen and (max-width: 767px) {
68  .sample .swiper-slide.swiper-slide-active .sample__thumb {
69    margin-bottom: 15px;
70  }
71}
72.sample .swiper-slide.swiper-slide-active .sample__text {
73  display: block;
74  position: absolute;
75  left: calc(100% + 40px);
76  z-index: 20;
77  max-width: 482px;
78  width: 100%;
79  top: 120px;
80}
81@media screen and (max-width: 767px) {
82  .sample .swiper-slide.swiper-slide-active .sample__text {
83    position: relative;
84    width: 100%;
85    left: 0;
86    top: 0;
87  }
88}
89
90@media screen and (max-width: 767px) {
91  .sample .swiper-slide-next,
92.sample .swiper-slide-prev {
93    opacity: 0;
94  }
95}
96.sample .swiper-button-prev {
97  left: -30px;
98  top: 30%;
99}
100@media screen and (max-width: 767px) {
101  .sample .swiper-button-prev {
102    left: -15px;
103    top: 30%;
104  }
105}
106.sample .swiper-button-next {
107  top: 30%;
108  right: 0;
109}
110@media screen and (max-width: 767px) {
111  .sample .swiper-button-next {
112    right: -15px;
113    left: auto;
114    top: 30%;
115  }
116}

JavaScript
1const mainSlides = document.querySelectorAll('.sample__list');
2console.log(mainSlides.length);
3const sampleSlider = new Swiper(".sample-slider", {
4    loop: true,
5    loopedSlides:mainSlides.length,
6    slidesPerView: 'auto', 
7    grabCursor: true,
8    spaceBetween: 30,
9    watchSlidesVisibility: true,
10    resizeReInit: true,
11    offsetPxBefore: false,
12    watchActiveIndex: true,
13    navigation: {
14        nextEl: ".swiper-button-next",
15        prevEl: ".swiper-button-prev",
16    },
17    pagination: {
18        el: '.sample-slider .swiper-pagination',
19        clickable: true,
20    }
21});

心当たりがあるとすればactive時と非active時にスライド幅を変えていることですが、
それによってリサイズ時もスライダー全体の幅は変わらないのでは？（スライド幅は固定のため）と考えています。
また、transform:scaleで指定するのが確実かとは思いますが、少し複雑な仕様にしたいため固定幅で指定しています。

ご教授いただけると助かります。
よろしくお願いいたします。

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

回答1件

      on: {
        slideChange: function () {
          var prevSlide = this.previousIndex;
          var currentSlide = this.activeIndex;

          // アクティブでなくなったスライドにスタイルを指定
          var prevSlideEl = this.slides[prevSlide];
          prevSlideEl.style.width = '600px';
        }
      }

投稿2023/04/24 12:53