urlの最後のidを取得して、スライドショーを始める位置を指定する方法を紹介します。
今回はスライドショーに「bxslider」を利用しています。
一覧ページと詳細ページのつながりの内容
① 商品一覧ページがあります。
② 詳細ページは商品一つ一つのページごとにスライドしてあります。
③ 詳細ページにいく場合、一覧ページからクリックされた商品の詳細を表示する
④ また、スライドは通常通り動く。
上記のような流れで実装したい！
今回初めて使ったのは「location.hash」です。
「location.hash」は一覧ページからidで指定した値を取得します。
一覧ページからクリックした場合のurlは
|
1 | index.html#product01 // #からの文字を取得します。 |
|
1 2 3 4 5 6 7 8 9 10 11 | if (location.hash){ id = location.hash.replace("#product0",""); //最後の数字を取得しています。 $('#slider1').bxSlider({ startSlide: id - 1, //zero based infiniteLoop: true, // infiniteLoopをtrueにしてループ表示を有効化します。 }); }else{ $('#slider1').bxSlider(); } |
