使用swiper js建立slider时，想要在桌面端同时展示3个slide而在移动端展示1个slide，应该如何自适应？
Html代码
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./1.jpg" alt="">
<p>This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1.</p>
<h2>Slide 1</h2>
</div>
<div class="swiper-slide">
<img src="./2.jpg" alt="">
<p>This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2.</p>
<h2>Slide 2</h2>
</div>
<div class="swiper-slide">
<img src="./3.jpg" alt="">
<p>This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3.</p>
<h2>Slide 3</h2>
</div>
<div class="swiper-slide">
<img src="./1.jpg" alt="">
<p>This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1.</p>
<h2>Slide 1</h2>
</div>
<div class="swiper-slide">
<img src="./2.jpg" alt="">
<p>This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2.</p>
<h2>Slide 2</h2>
</div>
<div class="swiper-slide">
<img src="./3.jpg" alt="">
<p>This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3.</p>
<h2>Slide 3</h2>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
Css代码
<style>
.swiper-wrapper{
width: 1500px;
}
.swiper-wrapper .swiper-slide{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ededed;
padding: 30px 0;
border-radius: 15px;
}
.swiper-wrapper .swiper-slide img{
width: 50px;
height: auto;
border-radius: 50%;
}
.swiper-wrapper .swiper-slide p{
width: 80%;
text-align: center;
}
</style>
Js代码：
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
slidesPerView:3,
spaceBetween : 30,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
