Swiper Js slider自适应显示不同数量slide问题

使用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 1h2>
          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 2h2>
          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 3h2>
          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 1h2>
          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 2h2>
          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 3h2>
          div>
        div>
        
        <div class="swiper-pagination">div>
      
        
        <div class="swiper-button-prev">div>
        <div class="swiper-button-next">div>
      
        
        
    div>
body>

Css代码

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>

swiper可以设置不同的屏幕下展示不同的

    breakpoints: { 
      320: {  //当屏幕宽度大于等于320
        slidesPerView: 2,
        spaceBetween: 10
      },
      768: {  //当屏幕宽度大于等于768 
        slidesPerView: 3,
        spaceBetween: 20
      },
      1280: {  //当屏幕宽度大于等于1280
        slidesPerView: 4,
        spaceBetween: 30
      }
    }