如何不重置Bootstrap Carousel幻灯片 [英] How to NOT reset Bootstrap Carousel slides

问题描述

我使用Bootstrap Carousel作为PHP网站的标题，当我更改网站页面时，是否有任何方法可以保持幻灯片的存储空间?因此，在下一页中，它将从下一张幻灯片开始，而不是从头开始.

I'm using the Bootstrap Carousel as header of a website in PHP, is there any way to keep the memory of the slide reached when I change the page of my website? So in the next page it would start with the next slide and not from the start again.

随时向我询问详细的部分，我只是在每个页面的顶部(包括一个PHP文件)中放置了标准的轮播代码.

Feel free to ask me for detailed parts, I have just put the standard carousel code in each page at the top (including one PHP file).

Update1 :谢谢您的回答，我创建了一个会话以保存轮播开始的幻灯片.现在的问题是:如何获得当前的幻灯片编号? (因为轮播会在x秒后循环，所以我需要显示最后一张幻灯片).

Update1: Thank you for the answer, I've created a session in order to save which slide the carousel should start with. Now the question is: how I can get the current slide number? (because the carousel cycles after x seconds and I need to get the last slide showed).

已解决:@Andrea Ajek非常感谢您的回答！它也无需使用PHP会话也解决了我的问题！！

Solved: @Andrea Ajek thank you very much for the answer! It solved my question also without using PHP sessions!!

推荐答案

您可以使用HTML5 WebStorage保存最后一张幻灯片索引.假设您的轮播的id属性等于"myCarousel"，则此代码应该可以正常运行:

You can use the HTML5 WebStorage to save the last slide index. Assuming that your carousel has an id attribute equal to "myCarousel", this code should work flawlessly:

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

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

The event 'slid.bs.carousel' occurs when the carousel has finished sliding from one item to another. To check if there is a slide index stored in sessionStorage and initialize correctly the carousel, you can use the following code:

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

这篇关于如何不重置Bootstrap Carousel幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！