BxSlider：頁面刷新/更改時保存滑塊的位置

Question

這是一個棘手的問題，我不確定如何解決這個問題。

我正在使用BxSlider作爲一個網站，它將滑動像一個正常的典型滑塊圖像。問題是我需要一種方法來保存用戶所在滑塊的最後位置，以便當他們刷新或導航到網站上的其他頁面時，它不會重置回第一張幻燈片。我的意思

圖片例如：

圖片（1）：滑塊的當前位置。

圖片（2）：刷新或換頁後滑塊的位置。

我需要滑塊從最後一張幻燈片繼續，而不是重置回第一張幻燈片。

這裏是滑塊的一個例子JsFiddle還有HTML：

<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報價：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/