質問: swaiper.jsを使い、スライドコンテンツを作成しています。 指定したスライドで、タイトル箇所に任意のタイトルの表示は可能でしょうか。 swiper.js http://idangero.us/swiper/#.V8wCpD6LR_w クイズのコンテンツです。 ページの流れは 問題→答え→解説 で、全部で3問あります。 この場合、全部で、9ページあるとして 通常は、スライドコンテンツの数にあわせて ナビゲーション番号は表示されると思うのですが、 タイトル箇所には、 問題番号を表示させたいです。 1~3のスライドには Q1 4~6ページのスライドには Q2 7~9ページのスライドには Q3 と表示させたいです。 静的の方がはやければそれしかないかなと考えています。 教えてください。
回答: swiper.jsの機能ではなく、別の方法で書き換えてあげることになると思います。 たとえば ``` Slide 1 Slide 2 Slide 3 ``` としておいて、 ``` document .querySelectorAll('.q1') .forEach(function(x){ x.innerHTML = "Quiz 1"; }); document .querySelectorAll('.q2') .forEach(function(x){ x.innerHTML = "Quiz 2"; }); ``` というようなスクリプトをSwiperの初期化の前に行えば可能かと思います。 (スクリプトは例なので、ライブラリを利用したり、ループを利用したりするとさらに簡潔に書ける場合もあります。)