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

urlの最後のidを取得して、スライドショーを始める位置を指定する方法を紹介します。

今回はスライドショーに「bxslider」を利用しています。

一覧ページと詳細ページのつながりの内容

①　商品一覧ページがあります。
②　詳細ページは商品一つ一つのページごとにスライドしてあります。
③　詳細ページにいく場合、一覧ページからクリックされた商品の詳細を表示する
④　また、スライドは通常通り動く。

上記のような流れで実装したい！

今回初めて使ったのは「location.hash」です。

「location.hash」は一覧ページからidで指定した値を取得します。

一覧ページからクリックした場合のurlは


index.html#product01　　// #からの文字を取得します。

1	index.html#product01　　// #からの文字を取得します。


if (location.hash){
		id = location.hash.replace("#product0","");  //最後の数字を取得しています。

			$('#slider1').bxSlider({
				 	startSlide: id - 1,　//zero based
					infiniteLoop: true,
//  infiniteLoopをtrueにしてループ表示を有効化します。
  				});
	}else{
		$('#slider1').bxSlider();
	}