ブラウザ幅を変えるとSwiperのレイアウトが崩れる

お世話になっております。

Swiperを使用しております。
1ページに見せているスライドは5枚で、それぞれwidthを指定しています。
幅を980で作っておりますが、ブラウザ幅をいじるとレイアウトが崩れてしまい、真ん中のスライドから崩れてしまいます。
解消法はありますでしょうか？
個人的には、!importantで画像幅を指定してしまっているのが原因かとも思うのですが、如何でしょうか。

お力添えいただけますと幸いです。
宜しくお願いいたします。

css
1.swiper-container {
2    width: 100%;
3    height: 394px;
4
5}
6
7/* 一番端のスライダー　*/
8.swiper-slide,
9.swiper-slide-duplicate {
10    transition-duration: 1s;
11    top: 90px;
12    opacity: .6;
13    width: 110px!important;
14    position: relative;
15    left: -214px;
16
17}
18
19.swiper-slide.swiper-slide-duplicate.swiper-slide-prev,
20.swiper-slide-prev {
21top: -20px;
22    opacity: .8;
23    width: 229px!important;
24    text-align: center;
25    margin: 0!important;
26    position: relative;
27left: -206px;
28    top: 35px;
29}
30
31.swiper-slide.swiper-slide-duplicate.swiper-slide-next,
32.swiper-slide-next {
33    opacity: .8;
34    z-index: -1;
35    width: 229px!important;
36    text-align: center;
37    margin: 0!important;
38    position: relative;
39left: -221px;
40    top: 35px;
41
42}
43
44.swiper-slide.swiper-slide-duplicate.swiper-slide-active,
45.swiper-slide-active {
46    opacity: 1;
47    width: 301px!important;
48    text-align: center;
49    position: relative;
50    left: -214px;
51    margin: auto!important;
52    top: 0;
53}

js
1<script type="text/javascript">
2     // swiperを生成
3var swiperMain = new Swiper('.swiper-container', {
4  autoplay: {
5        delay: 10000,
6        disableOnInteraction: true,
7        stopOnLastSlide: true
8      },
9      loop: true,
10      speed: 1000,
11      initialSlide: 4,
12      loopAdditionalSlides: 20,
13      slidesPerView : 'auto',
14      spaceBetween: 0,
15      centeredSlides : true,
16      simulateTouch: true,
17      grabCursor: true,
18      slideToClickedSlide: true,
19        pagination: {
20        el: '.swiper-pagination',
21      },
22    paginationClickable: true,
23     navigation: {
24    nextEl: '.swiper-button-next',
25    prevEl: '.swiper-button-prev',
26  },
27  });
28</script>

HTML
1・・・
2<!-- 9番目キューブ -->
3    <div class="swiper-slide"><img src="img/news/news/news.png">
4    </div>
5<!-- キューブ -->
6<!-- 10番目キューブ -->
7    <div class="swiper-slide"><img src="img/news/news/news.png">
8    </div>
9<!-- キューブ -->
10<!-- 1番目キューブ -->
11    <div class="swiper-slide"><img src="img/news/news/news.png">
12    </div>
13<!-- キューブ -->
14<!-- 2番目キューブ -->
15    <div class="swiper-slide"><img src="img/news/news/news.png">
16    </div>
17<!-- キューブ -->
18<!-- 3番目キューブ -->
19    <div class="swiper-slide"><img src="img/news/news/news.png">
20    </div>
21・・・
22<!-- キューブ -->