var swiper = new Swiper('.demo01 .swiper-container', {
slidesPerView: 3,//slideの枚数
spaceBetween: 10,//slide間の幅
slidesPerGroup: 1,//一度のスライド操作で何個分スライドさせるか
loop: true,//ループ
speed: 1500,//スライド時間
autoplay: {
delay: 3000,//表示時間
disableOnInteraction: false,//ユーザのアクションがあったときでも自動再生を止めない
},
breakpoints: {//レスポンシブ
1399: {
},
1199: {
},
991: {
slidesPerView: 3,
spaceBetween: 15,
},
767: {
slidesPerView: 2,
spaceBetween: 15,
},
575: {
slidesPerView: 1,
spaceBetween: 15,
}
},
});

.demo01 .swiper-slide {
padding: 1rem; }

.demo01 .swiper-slide a {
display: block;
background-color: #fff;
padding: 2rem;
border-radius: 1rem;
transition: all .3s; }

.demo01 .swiper-slide a dl {
margin: 0; }

.demo01 .swiper-slide a dl dt img {
border-radius: 1rem; }

.demo01 .swiper-slide a dl dd p {
color: #000;
margin: 0;
padding-top: 1rem; }

.demo01 .swiper-slide a:hover {
box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
transform: translateY(-10px); }

<div class="demo01">
<div class="swiper-container">
<div class="swiper-wrapper">

<div class="swiper-slide">
<a href="#">
<dl>
<dt><img src="../img/top-slide-img-1.webp" alt="スライダー1" class="img-fluid"></dt>
<dd>
<p class="text-center mt-3">スライダー１</p>
</dd>
</dl>
</a>
</div>


<div class="swiper-slide">
<a href="#">
<dl>
<dt><img src="../img/top-slide-img-2.webp" alt="スライダー2" class="img-fluid"></dt>
<dd>
<p class="text-center mt-3">スライダー２</p>
</dd>
</dl>
</a>
</div>


<div class="swiper-slide">
<a href="#">
<dl>
<dt><img src="../img/top-slide-img-3.webp" alt="スライダー3" class="img-fluid"></dt>
<dd>
<p class="text-center mt-3">スライダー３</p>
</dd>
</dl>	
</a>
</div>

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