swiperのスライダーが中央にならない

#問題点
jsでcentered: true で中央になると思ったのですが、ならないです。どうしてですか？

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="sass/slide.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
11    
12    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
13    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
14
15    <title>Document</title>
16</head>
17<body>
18          <!-- Swiper -->
19  <div class="swiper-container">
20    <div class="swiper-wrapper">
21      <div class="swiper-slide"><img src="images/BackgroundHomeSummer (1).jpg" alt=""></div>
22      <div class="swiper-slide"><img src="images/hukurou.jpg" alt=""></div>
23      <div class="swiper-slide"><img src="images/josh-hild-1626176-unsplash.jpg" alt=""></div>
24    </div>
25    <!-- Add Arrows -->
26    <div class="swiper-button-next"></div>
27    <div class="swiper-button-prev"></div>
28  </div>
29<script>
30
31  var swiper = new Swiper('.swiper-container', {
32    navigation: {
33    loop: true,
34    centeredSlides: true,
35    slidesPerView: 3,
36    spaceBetween: 30,
37    pagination: '.swiper-pagination',
38    nextEl: '.swiper-button-next',
39    prevEl: '.swiper-button-prev',
40    },
41  });
42</script>
43</body>
44</html>

scss
1.swiper-container {
2    margin-top: 50px;
3    width: 100%;
4    height: auto;
5    height: 487px;
6    .swiper-slide {
7      font-size: 18px;
8      background: #fff;
9      width: 280px!important;
10      padding: 12px 5px;
11      img {
12        background-size: cover;
13        overflow: hidden;
14        display: block; 
15        max-width: 100%;
16        height: auto;
17      }
18    }  
19  }

行動規範の内容に同意します

回答1件

jsの箇所、書き方にけっこう間違いがあります。
navigationの中に全部入ってますが、外に出して下さい。
pagenationの書き方は下記です。
公式サイト見た方がいいですよ。

var swiper = new Swiper('.swiper-container', {
  loop: true,
  centeredSlides: true,
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

投稿2019/05/28 07:33