Swiper.jsを使った「番号付きのページネーション」を実装したいのですが、うまく行きません。

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

再現したい番号付きページネーション

＜解説サイト様URL＞
https://garigaricode.com/swiper_navigation/#sample218

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

実際にうまくいったコード（番号なしページネーション）

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var swiper03 = new Swiper('.layout03 .swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    paginationClickable: true,
})
});
</script>

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

実際にうまくいかないコード（番号付きページネーション）

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var swiper03 = new Swiper('.layout03 .swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination:{
      el:'.swiper-pagination',
      type:'bullets',
      clickable:true,
      renderBullet:function(index,className){
      return'<span class="'+className+'">'+(index+1)+'</span>';
      }
     }
})
});
</script>

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

正しい指定をご教示いただけないでしょうか？
恐れ入りますが、どうぞ宜しくお願い申し上げます。

Lhankor_Mhy

2019/06/19 10:06

当方の環境で試したところ、ページネーションが表示されましたので、『ページネーション部そのものが非表示』という問題が再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/be96kpg3/ ↑terumiさんの環境で、問題は再現しますか？再現するのであれば環境の問題かと思われます。再現しないのであれば、ご提示いただいていない部分に問題があるかと思います。

terumi

2019/06/20 06:59

Lhankor_Mhy様親身なご回答をいただき、ありがとうございます。まずjsfiddleで当方のローカル環境の状況を再現しようとしましたら、やはりページネーションが表示されないようでした。また、Lhankor_Mhy様にご作成いただいたサンプルのHTML、CSS、JSをそのまま流用して、まずは当方jsfiddle環境で再現してみようと試みましたが、その際もページネーションが出現しませんでした。ブラウザ版jsfiddleの左メニュー「Resources」で、「wiper.min.css」と「swiper.min.js」も読み込み指定はできているはずですので、原因が分かりません。何か見落としがあるのでしょうか。重ね重ね申し訳ございません。

Lhankor_Mhy

2019/06/20 07:24

その問題が再現した（ページネーションが出現しなかった）状態で、jsFiddleをsaveして、リンクをご提示いただけますか？問題を解決するには、まずその問題を起こさないと始まらないのです。

macaron_xxx

2019/06/20 08:30

https://teratail.com/questions/195559 こっち消しといてくださいね

terumi

2019/06/20 08:39

申し訳ありません。こちらでございます。 https://jsfiddle.net/xau08f6h/ ちなみに、paginationのオプション表記を jsのコメントアウトした部分の表記（下記）で書いた場合、ローカル環境では問題なくページネーションが出現しておりました。 pagination: '.swiper-pagination' paginationClickable: true,

terumi

2019/06/20 08:41

pagination: '.swiper-pagination', paginationClickable: true, カンマが抜けておりました。度々申し訳ございません。

terumi

2019/06/20 08:44

＞macaron_xxx 申し訳ございません、運営様に削除申請をさせていただいておりますが、否認をされてしまいまして。

macaron_xxx

2019/06/20 09:00

横槍ですが、JavaScriptの読み込みタイミングを「onLoad」から「No wrap - bottom of <head>」にすれば動きますよ。

terumi

2019/06/20 09:19

ありがとうございます。確かに「onLoad」から「No wrap - bottom of <head>」で、 jsfiddle上ではどちらも動いたようです。しかしながら、paginationを下記の記述でおこなったパターン（番号付きページネーションのパターン）は、やはり当方ローカル環境では表示されないままのようでした。。 ----- ↓ローカル環境でうまく表示されない番号付きページネーションの記述 ----- pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true, renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } } ----- ↓ローカル環境で問題なく表示できている、ページネーションの番号無しパターンの記述 ----- pagination: '.swiper-pagination', paginationClickable: true,

Lhankor_Mhy

2019/06/20 09:20

とりあえず、↓を追加したらページネーションが出ましたね。 a{ width:640px; height:480px; } 理由はよくわからないのですが、サイズが確定していないとなんかあるのかもです。

Lhankor_Mhy

2019/06/20 09:23

ああ、そっちかあ。 > No wrap - bottom of <head>

Lhankor_Mhy

2019/06/20 09:25

> paginationを下記の記述でおこなったパターン jsfiddle でもそのパターンですよね。

terumi

2019/06/20 09:38

＞Lhankor_Mhy様大変ありがとうございます。おかげさまで、jsfiddle上では解決致しました。また、aタグにwidthとheightの指定をして確認致しましたが、ローカル環境ではpagination: {}の記述をしたパターンはやはりページネーションが消えてしまうようでした。他の部分はうまくいっている下記の書き方 pagination: '.swiper-pagination', paginationClickable: true, をしたパターンと何も変更はないので、ほとほと困っております。。

terumi

2019/06/20 09:39

御二方のお手を煩わせてしまい、誠に申し訳ございません。

macaron_xxx

2019/06/20 14:27

たぶん、javascriptの読み込みタイミングだと思うのですが、HTMLごと提示できますか？

Lhankor_Mhy

2019/06/21 01:04

macaron_xxxさんに同意です。

terumi

2019/06/24 03:56

Lhankor_Mhy様 macaron_xxx様お返事遅くなりまして申し訳ございません。下記ギガファイル便にて、 HTML CSS JSを格納したzipファイルをアップ致しました。 https://7.gigafile.nu/0701-b0874627d36dbaf1dadbb8ca3af05c9b6 swiper_sample_01.html →ページネーションが問題なく出現している記述版、 swiper_sample_02.html →ページネーションが消えてしまった記述版（番号付ページネーション版）です。 swiper_sample_02.html のHTMLファイルで、番号付きのページネーションが出現してくれる挙動を実現したいと考えております。お手を煩わせてしまい申し訳ございませんが、どうぞ宜しくお願い申し上げます。