スライダーをひとつのページで複数使う方法が知りたい。

Question

お世話になります。

swiper.jsというjavascriptのスライダーを1ページで3つ設置したいため、
下記コードのように記述したところ、スライダー1のみ正常に機能し、2と3は動きません。
クラス".swiper-container"を対象として機能するようですが、2と3も動作させる方法はありますでしょうか？

・
・
・
<link href="/common/css/swiper.min.css" rel="stylesheet" type="text/css" />
<script src="common/js/swiper.min.js"></script>
</head>

・
・
・

<!-- スライダー1 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="" alt=""></div>
		<div class="swiper-slide"><img src="" alt=""></div>
		<div class="swiper-slide"><img src="" alt=""></div>
	</div>
	<!-- Add Pagination -->
	<div class="swiper-pagination"></div>
	<!-- Add navigation -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- スライダー2 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="" alt=""></div>
		<div class="swiper-slide"><img src="" alt=""></div>
		<div class="swiper-slide"><img src="" alt=""></div>
	</div>
	<!-- Add Pagination -->
	<div class="swiper-pagination"></div>
	<!-- Add navigation -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- スライダー3 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="" alt=""></div>
		<div class="swiper-slide"><img src="" alt=""></div>
		<div class="swiper-slide"><img src="" alt=""></div>
	</div>
	<!-- Add Pagination -->
	<div class="swiper-pagination"></div>
	<!-- Add navigation -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>


<!-- 初期化 -->
<script>
$(function(){
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		paginationClickable: true,
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev'
	});
});

Answer 1

スライダーそれぞれのクラス名を変えて、それぞれJavaScriptを追記してみてはどうでしょうか？

Comments

[no23h]

8yazakiさま
ご返答ありがとうございます。
試しに以下でナンバリングを施したのですが、ダメでした。

<!-- スライダー1 -->
<div class="swiper-container1">
〜
</div>

<!-- スライダー2 -->
<div class="swiper-container2">
〜
</div>

<!-- スライダー3 -->
<div class="swiper-container3">
〜
</div>

<!-- 初期化 -->
<script>
$(function(){
var swiper = new Swiper('.swiper-container1, .swiper-container2, .swiper-container3', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
});

[8yazaki]

スクリプトもそれぞれ３つ記述してみてはどうでしょうか？
<script>
$(function(){
var swiper = new Swiper('.swiper-container1', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
});
</script>
<script>
$(function(){
var swiper = new Swiper('.swiper-container2', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
});
</script>
<script>
$(function(){
var swiper = new Swiper('.swiper-container3', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
});
</script>

Answer 2

提示されたコードですが、正しく動作しているように見えます。

動作サンプル
https://jsfiddle.net/604pc14y/3/

もしかしてなんですが、ご使用のSwiperのjsファイルが、jQuery用ではないのではないでしょうか。
JavaScriptオンリーなものと、jQuery用とで別のファイルがSwiperには用意されているようです。