Swiperを使って３つの別画像スライダーを表示する事ができません。

前提・実現したいこと

同ページに３つの別スライダーを表示させたいです。1つ目は１つずつの画像を表示させたく、２，３つめは３つのみのスライダー画像表示、ナビゲーション、ページネーションもそれぞれに表示させたいです。

１つめは、ナビゲーション、ページネーションあわせてうまく表示されました。２，３つ目はブラウザーを広げれば広げるほど、広げた幅一杯に何個も画像が表示されてしまいます。また、ナビゲーションが表示せず、ページネーションは１つのみ表示され、２，３を合わせた動きをします。

以下をリンクしております。
[JS]
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

[CSS]
swiper.min.css
swiper.css

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

	<!--冒頭カルーセル-->
	<div class="swiper-container" style="height:590px;">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><a href=""><img src="" width="970px" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" width="970px" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" width="970px" /></a></div>
		</div>
		
		<!-- pagenation -->
		<div class="swiper-pagination"></div>
    
		<!-- navigation buttons -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
	<script>
		var mySwiper = new Swiper ('.swiper-container', {
	    	loop: true,
	    	slidesPerView: 1,
  			spaceBetween: 10,
  			autoplay: 4000,
  			speed: 1500,
  			paginationClickable: true,
  			centeredSlides : true,
		    pagination: '.swiper-pagination',
		    nextButton: '.swiper-button-next',
		    prevButton: '.swiper-button-prev',
			breakpoints: {
				767: {
					slidesPerView: 1,
					spaceBetween: 0
				}
			}
	    })
	</script>
	<!--/冒頭カルーセル-->

	
	
	<!--カテゴリーカルーセル-->
	
    <!--カルーセル01-->
	<div class="swiper-container2" style="width:970px;">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
		</div>
		<!-- pagenation -->
		<div class="swiper-pagination"></div>
    
		<!-- navigation buttons -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

    <!--カルーセル02-->
	<div class="swiper-container2">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
		</div>
		<div class="swiper-pagination"></div>
    
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

    <!--カルーセル03
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
			<div class="swiper-slide"><a href=""><img src="" alt="" /></a></div>
		</div>
		<div class="swiper-pagination"></div>
    
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>-->
	    
	<!-- //category -->
    
<script>
$(function(){
    var swiper = new Swiper('.swiper-container2', {
        autoplay: 2000,
        loop: true,
    	slidesPerView: 3,
		autoplay: 4000,
		speed: 1500,
		paginationClickable: true,
		centeredSlides : true,
	    pagination: '.swiper-pagination',
navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
         });
});
</script>
	<!--/カテゴリーカルーセル-->