Swiper.jsの番号付きページネーションの実装をしたいです。

Question

現在、Swiper.jsを使って、下記解説サイト様のサンプル2-1-8のような
「番号付きのページネーション」を実装したいと考えております。

https://garigaricode.com/swiper_navigation/#sample218

しかし、以下の点でつまずいております。

分からない点のご説明

番号なしのページネーション指定を下記ソースで行った場合は、
問題なくページネーションが表示されます。

＜コード1＞

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var swiper03 = new Swiper('.layout03 .swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 1.4,
    loopedSlides: 3,
    centeredSlides : true,
    slideToClickedSlide: true,
    spaceBetween: 10,
    autoplay: 1500,
    loop: true,
    speed: 1000,
    pagination: '.swiper-pagination',
    paginationClickable: true,
})
});
</script>

しかし、解説サイト様を参考に下記の記述を行い、
ページネーションに番号を付けようとすると、
途端にページネーション部そのものが非表示になってしまうようです。

＜コード2＞

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var swiper03 = new Swiper('.layout03 .swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 1.4,
    loopedSlides: 3,
    centeredSlides : true,
    slideToClickedSlide: true,
    spaceBetween: 10,
    autoplay: 1500,
    loop: true,
    speed: 1000,
    pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
		renderBullet: function (index, className) {
			//中に数字を表示
			return '<span class="' + className + '">' + (index + 1) + '</span>';
		}
	}
})
});
</script>

どうも pagination: { } の指定か、
classNameの指定あたりに原因があるのではないかと考えておりますが、
特定できずにおります。

間違った記述がありましたら、ご教示いただけないでしょうか？
どうぞ宜しくお願い申し上げます。

Comments

[macaron_xxx]

htmlもください

Answer 1

pagination: {}の記述に対応している、
バージョンの新しいswiperを読み込む事で
解決いたしました。

この度はありがとうございました。

Answer 2

動くサンプル：https://jsfiddle.net/53gbnka2/

---

提示されたコードで特に問題なく動いています。

可能性としては、

• どこか別の箇所でエラーが起こっている ⇒ https://eng-entrance.com/javascript-display-error
• HTMLが間違っている（タグの閉じ忘れや指定方法の問題があるなど）
• Swiperのバージョンが古い

とか。

Comments

[kei344]

あ、こっち多重投稿のほうか。既に解決しているのかな。

【JavaScript - Swiper.jsを使った「番号付きのページネーション」を実装したいのですが、うまく行きません。｜teratail】
https://teratail.com/questions/195847

[terumi]

kei344様
ご回答ありがとうございます。
当方でもコンソールでの確認を実施してみたいと思います。

また、まだ解決はしていないのですが、
こちらに追加のHTML・CSS・JSファイルをアップさせていただきました。

https://teratail.com/questions/195847

お時間ございましたら、ご教示くださいませ。
お忙しい中誠に恐れ入りますが、どうぞ宜しくお願い致します。

[terumi]

https://teratail.com/questions/195847

こちらの質問にて、先ほど解決致しました。
この質問は、再度、運営様に削除依頼を送信させていただきます。

ご回答ありがとうございました。

[kei344]

teratail では回答が付いた記事の削除ができません。解決方法をご自分で回答欄に書き、それをベストアンサーとするのが良いと思います。

[terumi]

承知しました、そのように致します。
ありがとうございます。