Swiper.jsでレスポンシブ時にコンテンツの数を変えたい

Question

前提・実現したいこと

Swiper.jsを使ってスライダーを作成しています。
PC画面の時は、一つのスライドに23の6つ（スライド2ページ分）のコンテンツを掲載し、
スマホ画面の時は、22の4つ（スライド3ページ分）のコンテンツを掲載し、
スライドさせたいのですが、方法がわからず困っています。

ご教授よろしくお願い致します。

▽Swiper.js
https://swiperjs.com/

該当のソースコード

<div class="wrap">
  <div class="swiper-container">
    <ul class="swiper-wrapper">
      <li class="swiper-slide">
        <ul class="contents">
          <li>slide1 - content 1</li>
          <li>slide1 - content 2</li>
          <li>slide1 - content 3</li>
          <li>slide1 - content 4</li>
          <li>slide1 - content 5</li>
          <li>slide1 - content 6</li>
        </ul>
      </li>
      <li class="swiper-slide">
        <ul class="contents">
          <li>slide2 - content 7</li>
          <li>slide2 - content 8</li>
          <li>slide2 - content 9</li>
          <li>slide2 - content 10</li>
          <li>slide2 - content 11</li>
          <li>slide2 - content 12</li>
        </ul>
      </li>
    </ul>
    <!-- ページネーション -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

該当のソースコード

//ページネーションとループ処理
var mySwiper = new Swiper('.swiper-container', {
    loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});