swiperの「centeredSlides」が効かない

swiperで
centeredSlides: true,
を指定しても、スライダーが真ん中に来ません。
どうすればよいでしょうか。

html
1<section class="process container">
2        <div class="process__title">＃＃＃</div>
3        <div class="swiper">
4            <div class="swiper-wrapper">
5            　<div class="swiper-slide">
6                    <div class="swiper-slide slider">
7                        <p class="swiper-number">＃＃＃</p>
8                        <p class="swiper-text">＃＃＃</p>
9                    </div>
10                </div>
11　　　　　 <div class="swiper-slide">
12                    <div class="swiper-slide slider">
13                        <p class="swiper-number">＃＃＃</p>
14                        <p class="swiper-text">＃＃＃</p>
15                    </div>
16                </div>
17                <div class="swiper-slide">
18                    <div class="swiper-slide slider">
19                        <p class="swiper-number">＃＃＃</p>
20                        <p class="swiper-text">＃＃＃</p>
21                    </div>
22                </div>
23                </div>
24            <div class="navigation">
25                <div class="swiper-pagination"></div>  
26                <div class="swiper-button-prev "></div>
27                <div class="swiper-button-next"></div>
28            </div>
29        </div>
30    </section>

css
1.swiper {
2  width: 100%;
3}
4.swiper-wrapper {
5  margin-top: vw(54);
6
7}
8.swiper-slide {
9  text-align: center;
10}
11.swiper-slide .slider {
12  width: vw(500);
13  height: vw(200);
14  padding-top: vw(35);
15  text-align: center;
16  border: vw(5) solid #b5e9ee;
17  border-radius: vw(30);
18}
19.swiper-number {
20  display: inline-block;
21  border-bottom: 3px solid #1f2774;
22  font-family: NotoSansJP-BL;
23  font-size: vw(36);
24  line-height: vw(40);
25  color: #1f2774;
26}
27.swiper-text {
28  margin-top: vw(40);
29  font-family: NotoSansJP-R;
30  font-size: vw(36);
31  color: black;
32}
33
34.navigation {
35  position: relative;
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  padding: 3vw 0;
40}
41.swiper-button-prev {
42  top: 3.5vw;
43  left: 40.5vw;
44  width: vw(60);
45  height: vw(60);
46  line-height: vw(60);
47  border-radius: 50%;
48  background-color: #f6f3dc;
49}
50.swiper-button-next {
51  top: 3.5vw;
52  left: 55vw;
53  width: vw(60);
54  height: vw(60);
55  line-height: vw(60);
56  border-radius: 50%;
57  background-color: #f6f3dc;
58}
59.swiper-button-prev::before {
60  content: '\f053';
61  font-family: 'Font Awesome 5 Free';
62  font-weight: 900;
63  font-size: vw(28);
64  color: black;
65}
66.swiper-button-next::before {
67  content: '\f053';
68  font-family: 'Font Awesome 5 Free';
69  font-weight: 900;
70  font-size: vw(28);
71  color: black;
72  transform: scale(-1,1);
73  }
74.swiper-button-next::after,
75.swiper-button-prev::after {
76  content: "";
77}
78
79.swiper-pagination {
80  position: relative;
81  font-family: NotoSansJP-B;
82  font-size: vw(28);
83  color: black;
84}

js
1var swiper = new Swiper('.swiper', {
2  centeredSlides: true,
3  slidesPerView: 2.0,
4  pagination: {
5    el: '.swiper-pagination',
6    type: 'fraction',
7    formatFractionCurrent: function(number) {
8      return '0' + number;
9    },
10    formatFractionTotal: function(number) {
11      return '0' + number;
12    },
13  },
14  navigation: {
15    prevEl: '.swiper-button-prev',
16    nextEl: '.swiper-button-next',
17  },
18});

退会済みユーザー

2022/06/04 07:25

質問欄のコードで再現確認してみたのですが、「スライダーが真ん中に来ません。」からどのようにしたいのか把握することができませんでした。質問欄のコードを動かした場合に現在どのようになっているか、画像で貼り付けていただけますでしょうか？ (質問欄の”編集”から画像を貼り付けることができます) どの位置にしたいのか書き込みもしてあると助かります。それから、どのような環境(ブラウザーの種類・バージョン)で動かしているのかなどもご記載いただけると助かります。