BxSlider：ページが更新/変更されたときのスライダの位置を保存します

Question

これは難しい問題ですが、これについてはわかりません。

私はBxSliderを、通常の標準的なスライダのような画像をスライドさせるウェブサイトに使用しています。問題は、ユーザーがスライダの最後の位置を保存する方法が必要なため、サイト上の別のページに更新または移動したときに最初のスライドにリセットされないようにすることです。

私が何を意味するかの写真の例：

画像（1）：スライダーの現在の位置。

ピクチャ（2）：リフレッシュまたはページ変更後のスライダの位置。

最初のスライドに戻すのではなく、最後のスライドから続けるにはスライダーが必要です。ここで

はスライダーだけでなく、HTMLの例JsFiddleです：

<ul class="bxslider"> 
<li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li> 

任意のアイデアのは、非常に高く評価されます。

Answer 1

bxSlider提供することを2つのオプションがあります：startSlideとonSlideAfter

はあなたがここに自分のドキュメントを見ることができます：Docs

は、その後、あなたはそれをスライドでは、現在のインデックスを格納することができます変更するたびに、何をする必要がありますかlocalStorage.setItem()を使用して、ページがロードされたらlocalStorage.getItem()を使用して現在のインデックスを取得できます。

JS：

$(document).ready(function() { 

    var startIndex = localStorage.getItem("currentIndex"); 
    if(startIndex == null) 
     startIndex = 0; 

    $('.bxslider').bxSlider({ 
    startSlide: startIndex, 
     mode: 'horizontal', 
     infiniteLoop: true, 
     auto: true, 
     autoStart: true, 
     autoDirection: 'next', 
     autoHover: true, 
     pause: 3000, 
     autoControls: false, 
     pager: true, 
     pagerType: 'full', 
     controls: true, 
     captions: true, 
     speed: 500, 
     onSlideAfter: function($slideElm, oldIndex, newIndex) {save($slideElm, oldIndex, newIndex)} 
}); 

    function save($slideElm, oldIndex, newIndex) { 
     console.log(oldIndex + " " + newIndex); 

     localStorage.setItem("currentIndex", newIndex); 
    } 
}) 

フィドル：http://jsfiddle.net/Yq3RM/1264/