swiperを使った投稿記事のループ処理をしたい

swiperを使った投稿記事のループ処理をしたいです。

今のhtmlの状態は画像と文章をのせるには十分ですが、この状態を保ちながら
PHPで投稿記事をループさせようとすると、うまくいきません。

PC画面では今のHTMLのように3つだけ表示して、レスポンシブにすると両脇のものが
消えて真ん中にある記事だけを表示させたいです。

以下イメージです。

宜しくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!--Swiper-->
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
11<!-- Bootstrap core JS-->
12        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
14
15  </head>
16  <body>
17      <!-- Slider main container -->
18      <div class="swiper-container">
19        <!-- Additional required wrapper -->
20        <div class="swiper-wrapper">
21            <!-- Slides -->
22            <div class="swiper-slide" style="linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%">
23                <img src="https://picsum.photos/id/1041/650/400" alt="">
24                <p>aaaa</p>
25                <p>bbbbb</p>
26
27            </div>
28            <div class="swiper-slide">
29                <img src="https://picsum.photos/id/1042/650/400" alt="">
30                <p>aaaa</p>
31                <p>bbbbb</p>
32            </div>
33            <div class="swiper-slide">
34                <img src="https://picsum.photos/id/1043/650/400" alt="">
35                <p>aaaa</p>
36                <p>bbbbb</p>
37            </div>
38        </div>
39        <!-- If we need pagination -->
40        <div class="swiper-pagination"></div>
41        
42        <!-- If we need navigation buttons -->
43        <div class="swiper-button-prev swipe-sign"></div>
44        <div class="swiper-button-next swipe-sign"></div>
45    </div>
46
47    <style>
48        .swiper-button-prev{
49  position: absolute;
50  display: inline-block;
51  padding: 0 0 0 16px;
52  color: #000;
53  vertical-align: middle;
54  text-decoration: none;
55  font-size: 50px;
56  width: 48px;
57  }
58
59  .swiper-button-prev::before{
60  position: absolute;
61  top: 0;
62  bottom: 0;
63  left: 0;
64  margin: auto;
65  content: "";
66  vertical-align: middle;
67  box-sizing: border-box;
68  width: 150px;
69  height: 220px;
70  border: 1px solid #191919;
71  opacity: 0.6;
72  /* -webkit-border-radius: 25%; */
73  /* border-radius: 25%; */
74  background-color: #191919;
75  }
76
77  .swiper-button-prev::after{
78  position: absolute;
79  top: 0;
80  bottom: 0;
81  left: 0;
82  right: 0;
83  margin: auto;
84  content: "";
85  vertical-align: middle;
86  /* left: 5px; */
87  box-sizing: border-box;
88  width: 100px;
89  height: 100px;
90  border: 100px solid transparent;
91  border-left:  transparent;
92  border-right: 90px solid #fff;
93  }
94
95  .swiper-button-next{
96    position: absolute;
97    display: inline-block;
98    padding: 0 0 0 16px;
99    color: #000;
100    vertical-align: middle;
101    text-decoration: none;
102    font-size: 50px;
103    width: 48px;
104    }
105  
106    .swiper-button-next::before{
107    position: absolute;
108    top: 0;
109    bottom: 0;
110    right: 0;
111    margin: auto;
112    content: "";
113    vertical-align: middle;
114    box-sizing: border-box;
115    width: 150px;
116    height: 220px;
117    border: 1px solid #191919;
118    opacity: 0.6;
119    /* -webkit-border-radius: 25%; */
120    /* border-radius: 25%; */
121    background-color: #191919;
122    }
123  
124    .swiper-button-next::after{
125    position: absolute;
126    top: 0;
127    bottom: 0;
128    right: 0;
129    margin: auto;
130    content: "";
131    vertical-align: middle;
132    /* left: 5px; */
133    box-sizing: border-box;
134    width: 100px;
135    height: 100px;
136    border: 100px solid transparent;
137    border-right:  transparent;
138    border-left: 90px solid #fff;
139    }
140
141      </style>
142
143      <script>
144            var mySwiper = new Swiper ('.swiper-container', {
145                loop: true,
146                slidesPerView: 2,
147                spaceBetween: 5,
148                centeredSlides : true,
149                pagination: '.swiper-pagination',
150                nextButton: '.swiper-button-next',
151                prevButton: '.swiper-button-prev',
152                breakpoints: {
153                    767: {
154                    slidesPerView: 1,
155                    spaceBetween: 0
156                    }
157                }
158                })
159      </script>
160  </body>
161</html>
162         
163

php
1<div class="container-fluid">
2            <div class="row py-3">
3                <div class="col-md-4 col-12">
4                    <div class="bg-white py-3">
5                    <!--サムネイル-->
6                    <div class="pb-3">
7                    <?php if ( has_post_thumbnail() ) : ?>
8                        <?php the_post_thumbnail(); ?>
9                            <?php else : ?>
10                                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/no-image.png" alt="">
11                            <?php endif; ?>
12                    </div>
13                    <!--記事タイトル-->
14                    <h2 class="h4 px-3 pb-3"><?php the_title(); ?></h2>
15                    <p><?php the_excerpt(); ?></p>
16                    <!---->
17                    <div class="text-center">
18                        <p><?php the_date('Y.m.d'); ?></p>
19                    </div>
20                    </div>
21                </div>
22            </div>
23        </div>
24