如何不重置 Bootstrap 旋转木马幻灯片

Question

我正在使用 Bootstrap 轮播作为 PHP 中网站的 header，有什么方法可以在我更改页面时保持幻灯片到达的内存我的网站？因此，在下一页中，它将从下一张幻灯片开始，而不是再次从头开始。

有详细的部分可以问我，我只是把标准轮播代码放在每个页面的顶部（包括一个PHP文件）。

Update1：谢谢您的回答，我创建了一个 session 以保存轮播应该从哪张幻灯片开始。现在的问题是：如何获得当前的幻灯片编号？（因为旋转木马在 x 秒后循环，我需要显示最后一张幻灯片）。

已解决：@Andrea Ajek 非常感谢您的回答！它也解决了我的问题而不使用 PHP sessions!!

Answer 1

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

$('#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);
}

如何不重置 Bootstrap 旋转木马幻灯片

How to NOT reset Bootstrap Carousel slides

php

jquery

carousel

twitter-bootstrap