如何不重置引导轮播幻灯片答案

【问题标题】：How to NOT reset Bootstrap Carousel slides如何不重置引导轮播幻灯片
【发布时间】：2017-05-13 02:16:45
【问题描述】：

我在 PHP 中使用 Bootstrap Carousel 作为网站的标题，当我更改网站页面时，有什么方法可以保持幻灯片的内存到达？所以在下一页中，它将从下一张幻灯片开始，而不是从头开始。

详细部分欢迎私信我，我只是把每一页的标准轮播代码放在最上面（包括一个PHP文件）。

Update1：感谢您的回答，我创建了一个会话来保存轮播应该从哪张幻灯片开始。现在的问题是：我怎样才能得到当前的幻灯片编号？（因为 x 秒后轮播循环，我需要显示最后一张幻灯片）。

已解决：@Andrea Ajek 非常感谢您的回答！它在不使用 PHP 会话的情况下也解决了我的问题！

【问题讨论】：

这是一个相当模糊的问题，你可能会因此而被否决，只是你知道的。回到主题，您可以通过在用户会话、cookie 或本地存储中设置最新查看的幻灯片来完成此操作。然后通过在另一个页面上检查该值来从您离开的地方继续。
在slid.bs.carousel事件上放置一个事件监听器并将最新的幻灯片编号存储在cookie中
正确的做法是不要重新加载页面的标题部分，只需使用异步调用替换页面内容，同时使用pushstate 更新地址。如果您以其他方式执行此操作，则滑块将被重新加载、重新渲染和重新初始化，最终从您导航时所在的幻灯片开始。最简单的方法是使用 $_SESSION 存储来记住当前幻灯片，每次更改时。当您进入新页面时，请检查您在哪张幻灯片上以及该幻灯片上的init()。

标签： php jquery twitter-bootstrap carousel

【解决方案1】：

您可以使用 HTML5 WebStorage 来保存最后一张幻灯片的索引。假设您的 carousel 的 id 属性等于“myCarousel”，那么这段代码应该可以完美运行：

$('#myCarousel').on('slid.bs.carousel', function () {
    var currentSlide = $('#myCarousel div.active').index();
    sessionStorage.setItem('lastSlide', currentSlide);
});

当轮播完成从一个项目滑到另一个项目时，会发生“slid.bs.carousel”事件。要检查 sessionStorage 中是否存储有幻灯片索引并正确初始化轮播，可以使用以下代码：

if(sessionStorage.lastSlide){
      $("#myCarousel").carousel(sessionStorage.lastSlide*1);
}

【讨论】：