Question

我想存储Bootstrap轮播的状态。

如果用户在第二张幻灯片上，他点击链接并转到下一页，当他回来时，如果有cookie，我希望保持相同的轮播状态。

Answer 1

我建议，你必须为那些包含img tag for image的div提供id。例如

<div class="carousel-inner">
  <div class="item" id="first_image">
    <img data-src="#" alt="First slide" src="/image_1.png">
  </div>

  <div class="item" id="second_image">
    <img data-src="#" alt="Second slide" src="/image_2.png">
  </div>

  <div class="item" id="third_image">
    <img data-src="#" alt="Third slide" src="/image_3.png">
  </div>    
</div>

现在你必须在该点击上调用一个常用函数，例如：set_carousel_image_for_cookie()。

现在使用jquery设置，检索和删除cookie的代码。

$(document).ready(function(){  
    // set cookie  
    var image_id = $('.carousel-inner).find('div').class("active");
    $.cookie('my_carousel_image', image_id);  

    // get cookie  
    alert($.cookie('my_carousel_image'));  

    // delete cookie  
    $.cookie('my_carousel_image', null);  
});

点击该链接后 - 调用set_carousel_image_for_cookie功能并设置cookie。

在同一页面的页面加载中，编写另一个函数，如check_cookie_for_carousel() - 这里检测是否存在任何cookie，然后获取cookie值并将活动类设置为该特定div。

你可能有点想法解决它。

Bootstrap Carousel：在Cookie中存储状态？

1 个答案: