Swiperでの各スライドの画像の大きさを調整したい

お世話になっております。
Swiperでの調整に苦戦しています。

1Pに見せたいスライドは「5枚」
全部で「10枚」あります。

並び順は下記のようにしたいです。
9　10　1　2　3

また、
「9」と「3」
「10」と「2」
はそれぞれ同じ大きさで「10と2」が「9と3」より少し大きいです。

真ん中のスライド「1」は一番大きくしたいです。

それぞれ
大：287px
中：214px
小：110px
でスライド全体の幅は980pxとしたいです。

現在指定しているオプションとcssは以下になります。

js
1<script type="text/javascript">
2     // swiperを生成
3var swiperMain = new Swiper('.swiper-container', {
4loop: true,
5loopedSlides: 5,
6speed: 1000,
7initialSlide: 1,
8slidesPerView : 'auto',
9spaceBetween: 110,
10centeredSlides : true,  
11  });
12</script>

css
1.swiper-container {
2  width: 980px;
3  text-align: center;
4  height: auto;
5}
6
7/* 一番端のスライダー　*/
8.swiper-slide {
9    opacity: .6;
10    width: 110px!important;
11    margin-left: 110px;
12
13}
14
15.swiper-slide > a {
16    pointer-events: none;
17}
18
19.swiper-slide > a >img {
20    width: 110px!important;
21}
22
23.swiper-slide-duplicate {
24transition-duration: 1s;
25    width: 110px!important;
26    margin-left: 154px;
27
28}
29
30.swiper-slide-duplicate > a > img {
31    width: 110px!important;
32}
33
34.swiper-slide-prev {
35    transform: scale(.8);
36    transition-duration: 1s;
37    top: -20px;
38    opacity: .8;
39    width: 214px!important;
40}
41
42.swiper-slide-prev > a > img {
43    width: 214px!important;
44
45}
46
47.swiper-slide-next {
48transform: scale(.8);
49transition-duration: 1s;
50    opacity: .8;
51    z-index: -1;
52        width: 214px!important;
53
54}
55
56.swiper-slide-next > a > img {
57width: 214px!important;
58}
59
60.swiper-slide-active {
61    opacity: 1;
62    width: 287px!important;
63
64}
65
66.swiper-slide-active > a {
67    pointer-events: all;
68}
69
70.swiper-slide-active > a > img {
71    transition-duration: 0.3s;
72    width: 287px!important;
73}