BxSlider: Save Position des Sliders, wenn Seite aktualisiert/aktualisiert wird

Question

Dies ist eine knifflige und ich bin mir nicht sicher, wie das geht.

Ich verwende BxSlider für eine Website, die durch Bilder wie ein normaler typischer Slider gleiten wird. Das Problem ist, dass ich eine Möglichkeit brauche, um die letzte Position des Sliders zu speichern, auf dem sich der Benutzer befand, damit er nicht auf die erste Folie zurückgesetzt wird, wenn er aktualisiert oder zu einer anderen Seite der Site navigiert.

Bild Beispiel dafür, was ich meine:

Bild (1): Die aktuelle Position des Schiebers.

Bild (2): Die Position des Schiebereglers nach dem Aktualisieren oder Seitenwechsel.

Ich brauche den Schieberegler, um von der letzten Folie fortzusetzen, anstatt auf die erste Folie zurückzusetzen.

Hier ist ein Beispiel JsFiddle des Schiebers sowie die 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> 

Jeder wird die Idee sehr geschätzt.

Answer 1

Es gibt zwei Möglichkeiten, dass bxSlider Angebot: startSlide und onSlideAfter

Sie an ihrer Dokumentation hier aussehen: Docs

Dann, was Sie es jedes Mal, wenn die Schlitten ändern tun müssen, können Sie den aktuellen Index speichern mit localStorage.setItem() und wenn die Seite geladen ist, können Sie den aktuellen Index mit localStorage.getItem() abrufen.

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); 
    } 
}) 

Fiddle: http://jsfiddle.net/Yq3RM/1264/