質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1224閲覧

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

terumi

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/06/18 03:00

編集2019/06/19 04:44

現在、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の指定あたりに原因があるのではないかと考えておりますが、
特定できずにおります。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

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

投稿2019/06/24 07:19

terumi

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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


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

可能性としては、

とか。

投稿2019/06/23 15:48

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/06/23 15:52

あ、こっち多重投稿のほうか。既に解決しているのかな。 【JavaScript - Swiper.jsを使った「番号付きのページネーション」を実装したいのですが、うまく行きません。|teratail】 https://teratail.com/questions/195847
terumi

2019/06/24 04:14

kei344様 ご回答ありがとうございます。 当方でもコンソールでの確認を実施してみたいと思います。 また、まだ解決はしていないのですが、 こちらに追加のHTML・CSS・JSファイルをアップさせていただきました。 https://teratail.com/questions/195847 お時間ございましたら、ご教示くださいませ。 お忙しい中誠に恐れ入りますが、どうぞ宜しくお願い致します。
terumi

2019/06/24 04:52

https://teratail.com/questions/195847 こちらの質問にて、先ほど解決致しました。 この質問は、再度、運営様に削除依頼を送信させていただきます。 ご回答ありがとうございました。
kei344

2019/06/24 05:26

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

2019/06/24 07:17

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問