Bootstrap Carousel：在Cookie中存儲狀態？

Question

我想存儲Bootstrap傳送帶的狀態。

如果用戶在第二張幻燈片上，他點擊鏈接並進入下一頁，當他回來時，如果Cookie存在，我想保持輪播的狀態。

Answer 1

我會建議，你必須爲那些包含img標籤的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。

可能你有一些想法來解決它。