swiperで3枚表示のスライドを作成したい

実現したいこと

3枚表示、アイテム数が3つのスライドを実装する

前提

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

スライドすると2枚しか表示されなくなる。

0:348 Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

該当のソースコード

html
1<div class="swiper-container">
2                        <div class="swiper">
3                            <ul class="swiper-wrapper">
4                                <li class="swiper-slide">
5                                    <div class="voices-card__inner">
6                                        <div class="voices-card__wrapper">
7                                            <img class="voices-card__img" src="img/layout/top-page/office worker 2.png" alt="サラリーマン">
8                                            <h3 class="voices-card__level3-heading"></h3>
9                                        </div>
10                                        <p class="job-text"></p>
11                                        <p class="voices-card__text"></p>
12                                    </div>
13                                </li>
14                                <li class="swiper-slide">
15                                    <div class="voices-card__inner">
16                                        <div class="voices-card__wrapper">
17                                            <img class="voices-card__img" src="i" alt="">
18                                            <h3 class="voices-card__level3-heading"></h3>
19                                        </div>
20                                        <p class="job-text"></p>
21                                        <p class="voices-card__text"></p>
22                                    </div>
23                                </li>
24                                <li class="swiper-slide">
25                                    <div class="voices-card__inner">
26                                        <div class="voices-card__wrapper">
27                                            <img class="voices-card__img" src="" alt="">
28                                            <h3 class="voices-card__level3-heading"></h3>
29                                        </div>
30                                        <p class="job-text"></p>
31                                        <p class="voices-card__text"></p>
32                                    </div>
33                                </li>
34                            </ul>
35                        </div>
36                        <div class="swiper-pagination"></div>
37                        <button class="voices-btn voices-prev">
38                            <img class="voices-btn__img" src="" alt="">
39                        </button>
40                        <button class="voices-btn voices-next">
41                            <img class="voices-btn__img" src="" alt="">
42                        </button>
43                    </div>
44

JavaScript
1    const mySwiper = new Swiper('.swiper', {
2        // Optional parameters
3        loop: true,
4        loopedSlides: 3,
5        
6        autoplay: {
7            delay: 5000, // 自動再生の間隔をミリ秒で指定
8            disableOnInteraction: false, // ユーザーがスライダーにインタラクションした後も自動再生を続ける
9        },
10    
11        // If we need pagination
12        pagination: {
13            el: ".swiper-pagination",
14            clickable: true,
15        },
16    
17        slidesPerView: "auto",
18        spaceBetween: 26,
19
20        navigation: {
21            nextEl: '.voices-next',
22            prevEl: '.voices-prev'
23        },
24
25        centeredSlides: true,
26    });

css
1.swiper-container {
2    position: relative;
3}
4
5.swiper {
6    margin: 0 auto 3.12rem;
7    max-width: 52.38rem;
8}
9
10.swiper-wrapper {
11    margin: 0 auto;
12    max-width: 52.38rem;
13}
14
15.swiper-slide {
16    background-color: $color-white;
17    border-radius: 1.25rem;
18    padding: 1.37rem 1.37rem 2.62rem;
19    max-width: 13.615rem;
20}
21
22.voices-card__wrapper {
23    display: flex;
24    align-items: center;
25    margin-bottom: 0.87rem;
26    position: relative;
27
28    &::before {
29        content: '';
30        background-color: #F5F0C5;
31        border-radius: 50%;
32        position: absolute;
33        top: 0;
34        left: 0;
35        width: 3.5625rem;
36        height: 3.5625rem;
37    }
38}
39
40.voices-card__img {
41    margin-right: 0.69rem;
42    padding: 0.5rem;
43    object-fit: cover;
44    width: 2.5625rem;
45    height: 2.5625rem;
46    position: relative;
47    z-index: 1;
48}
49
50.voices-card__level3-heading {
51    font-size: 1rem;
52    font-weight: 700;
53    line-height: 1.2;
54    margin-top: 0.07rem;
55}
56
57.job-text {
58    background-color: $color-sub;
59    color: $color-white;
60    display: inline-block;
61    font-size: 0.75rem;
62    font-weight: 700;
63    margin-bottom: 0.87rem;
64    padding: 0.19rem 0.38rem;
65}
66
67.voices-card__text {
68    font-size: 0.875rem;
69    line-height: 1.5;
70}
71
72.voices-btn {
73    border-radius: 50%;
74    object-fit: cover;
75    position: absolute;
76    top: 10.44rem;
77    width: 2.75rem;
78    height: 2.75rem;
79    z-index: 3;
80
81    @include max(lg) {
82        top: 25rem;
83        width: 1.75rem;
84        height: 1.75rem;
85    }
86}
87
88.voices-prev {
89    left: 3.5rem;
90
91    @include max(lg) {
92        left: calc(50% - 3rem);
93    }
94}
95
96.voices-next {
97    right: 3.5rem;
98
99    @include max(lg) {
100        right: calc(50% - 3rem);
101    }
102}
103
104.voices-btn__img {
105    width: 2.75rem;
106    height: 2.75rem;
107
108    @include max(lg) {
109        width: 1.75rem;
110        height: 1.75rem;
111    }
112}
113
114.swiper-pagination {
115    position: static;
116}