Swiperを使ってレスポンシブに対応したカルーセル表示ができない。

コーディング初心者です。
Swiperの使い方、間違っているところを教えてもらえると幸いです(;_:)
リンクにはったようなカルーセル表示にしたいですが、画像が重なってしまうのと、スライダーが動きません。
宜しくお願い致します。

ちなみにCSSは<head>内にJSは</body>の前に置いています。

HTML
1
2<link href="css/swiper.min.css" rel="stylesheet">
3<script src="js/swiper.min.js"></script>
4
5<div class="swiper-container">
6    <div class="swiper-wrapper">
7        <div class="swiper-slide"><img src=""></div>
8        <div class="swiper-slide"><img src=""></div>
9        <div class="swiper-slide"><img src=""></div>
10    </div>
11    <!-- ページネーション -->
12    <div class="swiper-pagination"></div>
13    
14    <!-- ナビゲーションボタン -->
15    <div class="swiper-button-prev"></div>
16    <div class="swiper-button-next"></div>
17</div>

Javascript
1
2var mySwiper = new Swiper ('.swiper-container', {
3  loop: true,
4  slidesPerView: 2,
5  spaceBetween: 10,
6  centeredSlides : true,
7  pagination: '.swiper-pagination',
8  nextButton: '.swiper-button-next',
9  prevButton: '.swiper-button-prev',
10  breakpoints: {
11    767: {
12      slidesPerView: 1,
13      spaceBetween: 0
14    }
15  }
16})

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

回答1件

ベストアンサー

https://jsfiddle.net/g571fvye/

画像が重なってしまうのは参考サイトと同じように書くと

css
1.swiper-container .swiper-slide img {
2    max-width: 100%;
3    height: auto;
4}

等で回避できます。

スライダーが動かない点は、jsファイル、スライド作成用コードの読み込み順を確認してください。

html
1<script src="js/swiper.min.js"></script>
2<script>
3var mySwiper = new Swiper ('.swiper-container', {
4  loop: true,
5  slidesPerView: 2,
6  spaceBetween: 10,
7  centeredSlides : true,
8  pagination: '.swiper-pagination',
9  nextButton: '.swiper-button-next',
10  prevButton: '.swiper-button-prev',
11  breakpoints: {
12    767: {
13      slidesPerView: 1,
14      spaceBetween: 0
15    }
16  }
17})
18</script>
19</body>