Swiperのスライドの配置

カルーセルを作りたくて**「Swiper」**を使いました。
コンテンツはサムネイルつきですがここでは省略しました。

###やりたいこと
表示エリアには5つのコンテンツが表示したいのですが、4つは切れないで表示、
5つ目が左右半分見える状態にしたいです。

html
1<div class="swiper-container">
2   <div class="carousel swiper-wrapper">
3
4      <div class="swiper-slide">
5        コンテンツ1
6      </div>
7
8　　　<div class="swiper-slide">
9        コンテンツ2
10      </div>
11
12　　　<div class="swiper-slide">
13        コンテンツ3
14      </div>
15
16　　　<div class="swiper-slide">
17        コンテンツ4
18      </div>
19
20　　　<div class="swiper-slide">
21        コンテンツ5
22      </div>
23
24      <div class="swiper-slide">
25        コンテンツ5
26      </div>
27
28   </div>
29</div>

一番外側のdivはwidthを設定しています。

css
1.swiper-container{
2	width: 1920px;
3}
4

javascript
1
2<script>
3var swiper =
4 new Swiper('.swiper-container', {
5     loop: true,
6     slidesPerView: 5,
7     spaceBetween: 20,
8     centeredSlides : true,
9     speed: 900,
10
11     autoplay: {
12          delay: 7000,
13          disableOnInteraction: true
14  	},
15  });
16
17</script>