swiper4.5.1 で複数の画像が右から左にゆっくり流れる、ギャラリーを表示したい。

前提・実現したいこと

swiper4.5.1 で複数の画像が右から左にゆっくり流れる、
ギャラリーを表示したい。

■■な機能を実装中に以下のエラーメッセージが発生しました。

swiper.jsのprevボタンとnextボタンが効かない。
書く順番を変更すると表示がおかしくなり、複数枚の設定ができなくなる。

該当のソースコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
<script>
var swiper = new Swiper ('.swiper-container', {

  autoplay: {
      delay: 0,
    },
    speed: 3000,


   loop: true,
   paginationClickable: true,
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',


   slidesPerView: 4.2,
   breakpoints: {
   // 980px以上の場合
   480: {
     slidesPerView: 1.7,
   },
   // 980px以上の場合
   980: {
   slidesPerView: 2.2,
   },
   // 1200px以上の場合
   1200: {
   slidesPerView: 4,
   }
   }

    });


</script>

書く順番を変更すると、今までうまくいっていた複数画像の表示も崩れてしまい、オートプレイもできませんでした。

var swiper = new Swiper ('.swiper-container', {

loop: true,
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

autoplay: {
delay: 0,
},
speed: 3000,

slidesPerView: 4.2,
breakpoints: {
// 980px以上の場合
480: {
slidesPerView: 1.7,
},
// 980px以上の場合
980: {
slidesPerView: 2.2,
},
// 1200px以上の場合
1200: {
slidesPerView: 4,
}
}