URLを取得してスライドショーの位置を調整する

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(); 	}  | 
Author Profile

スターフィールド編集部
SHARE




