BxSlider：页面为 refreshed/changed 时保存滑块的位置

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().[= 检索当前索引18=]

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/

BxSlider：页面为 refreshed/changed 时保存滑块的位置

BxSlider: Save position of slider when page is refreshed/changed

html

javascript

jquery

bxslider