質問: ``` <{ページ番号の変数}"/> ``` 上記のようなスライド画像を使用しております。 画像には一つ一つIDが振られておりそのID分URLがあります。 そのURL一つ一つがID分画像をスライドできるようになっております。 現在、スライドの画像は「bxSlider」というプラグインを使用しており、画像枚数の表示が本来の枚数より2枚多いため直しています。 そしてbxSlider.jsを呼び出している箇所の下を下記のように修正しました。 ---------------------------------------- ``` bxslider.cssファイルの呼び出し。 bxslider.jsファイルの呼び出し。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ bxslider.cssの呼び出し。 bxslider.jsの呼び出し。 ``` --- 枚数分カウントが表示されるようになりましたが、 今度は読み込みが終わったところで1枚前の画像が表示されるようになりました。 右にスライドすると最初だけ1枚飛ばしで画像が移動してしまいます。 startSlide : <{ページ番号の変数} -1/>の部分 「-1」を消すとスライドの動作が壊れます。 どのように壊れるかというと最後の画像が1枚目の画像になってしまいます。 どのように修正すれば正常に出来るでしょうか? 調べても解決行かず、すみません、お助け下さい。
回答: ちょっとHTMLとかJavaScriptでは見慣れないタグやコメントの表記がありましたが、 `{ページ番号の変数}`が肝であるのは間違いないところです。 また、bxSliderサイトのオプション解説では、 > > startSlide > > Starting slide index (zero-based) > > > と記載されており、画面上では「1」始まりの数字で表示して、startSlideオプションには「-1」して与えるべきであると考えました。 ``` 1 ``` として、 ``` $(document).ready(function() { var $img = $('.img'), pagemax = $img.length, count = Number($("#curIndex").text());// ページ番号の変数 $('.bx_slider').bxSlider({ startSlide : count - 1,//<{ページ番号の変数} -1/>, pager : false, captions : true, onSlideNext : function() { $('#curIndex').text(pagemax === count ? count = 1 : ++count); }, onSlidePrev : function() { $('#curIndex').text(1 === count ? count = pagemax : --count); } }); }); ``` いかがでしょうか。