Swiperを使って自動でスライドさせたいが、slidesPerViewに変則的な数値を入れるとスライドがうまく働かない

Question

Swiperを使って自動でループするスライダーを作りたいと思い、次のようなコードを書きました。

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide swiper-slide1">1</li>
        <li class="swiper-slide swiper-slide2">2</li>
        <li class="swiper-slide swiper-slide3">3</li>
        <li class="swiper-slide swiper-slide4">4</li>
        <li class="swiper-slide swiper-slide5">5</li>
    </ul>
</div>

body, ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.swiper-slide {
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
}

.swiper-slide1 {
  background-color: red;
}

.swiper-slide2 {
  background-color: blue;
}

.swiper-slide3 {
  background-color: yellow;
  color: #000;
}

.swiper-slide4 {
  background-color: green;
}

.swiper-slide5 {
  background-color: purple;
}

Swiperについては、少し古いですが、
インターネットエクスプローラーにも対応させたかったため、
バージョン4.2.5を読み込んでいます。

最初にswiper.min.cssとswiper.jsを読み込んだあと、
次のようなJavaScriptコードを書きました。

var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    centeredSlides: true,
    slidesPerView: 3.76,
    spaceBetween: 56,
    autoplay: {
        delay: 3000,
    },
});

ここで問題となるのが、slidesPerView: 3.76,という記述です。
仮にslidesPerView: 3,と記述すると問題なく自動スライドします。

ですが今回は5つのliタグのうち両端の2つは画面から見切れさせたかったので、
3.76という数値にしています。

ところがこのような数値を入力すると、
本来は画面の中央は1,2,3,4,5,1,2,3,・・・と順に表示されなければならないのに、
このコードでは画面の中央が1,2,4,5,1,2,4,5,1,2,4,・・・というように
3を飛ばしてスライドされてしまいます。

なんとか1,2,3,4,5ときれいにスライドさせたいのですが、
どのようにすればいいのでしょうか？

JavaScriptを修正する方法でもいいですし、CSSを修正する方法でも構いません。
とにかく両端が見切れたうえで、きれいにスライドさせたいのです。

よろしくお願いします。

Answer 1

バージョン5以降を使うことにしました。