jsでのスライドコンテンツのナビゲーションについて質問です。指定したスライドで、タイトル箇所に任意のタイトルの表示は可能でしょうか。

swaiper.jsを使い、スライドコンテンツを作成しています。
指定したスライドで、タイトル箇所に任意のタイトルの表示は可能でしょうか。

swiper.js
http://idangero.us/swiper/#.V8wCpD6LR_w

クイズのコンテンツです。

ページの流れは
問題→答え→解説
で、全部で３問あります。

この場合、全部で、９ページあるとして
通常は、スライドコンテンツの数にあわせて
ナビゲーション番号は表示されると思うのですが、
タイトル箇所には、
問題番号を表示させたいです。

1~３のスライドには
Q１

4~6ページのスライドには
Q2

7~9ページのスライドには
Q3

と表示させたいです。

静的の方がはやければそれしかないかなと考えています。

教えてください。

kei344

2016/09/04 11:58

「タイトル箇所」とはどの部分を指すのか、具体的に記述ください。

joe_tomo

2016/09/05 01:14

ありがとうございます！ページ上部という意図であります！

kei344

2016/09/05 16:49

出来ている範囲だけでもいいので、具体的にHTML（必要ならCSSも）とJavaScriptを質問文に追記ください。

行動規範の内容に同意します

回答1件

ベストアンサー

swiper.jsの機能ではなく、別の方法で書き換えてあげることになると思います。
たとえば

html
1<div class="swiper-wrapper">
2  <div class="swiper-slide">
3    <div class="title q1"></div>
4    Slide 1
5  </div>
6  <div class="swiper-slide">
7    <div class="title q1"></div>
8    Slide 2
9  </div>
10  <div class="swiper-slide">
11    <div class="title q2"></div>
12    Slide 3
13  </div>
14</div>

としておいて、

javascript
1document
2  .querySelectorAll('.q1')
3  .forEach(function(x){
4    x.innerHTML = "Quiz 1";
5  });
6
7document
8  .querySelectorAll('.q2')
9  .forEach(function(x){
10    x.innerHTML = "Quiz 2";
11  });