如何不重置Bootstrap旋轉木馬幻燈片

-1

我使用Bootstrap Carousel作爲PHP中網站的標題，有什麼方法可以在更改我的網頁時保持幻燈片的內存？所以在下一頁，它將從下一張幻燈片開始，而不是從頭開始。如何不重置Bootstrap旋轉木馬幻燈片

隨意問我詳細的部分，我剛剛在每個頁面頂部（包括一個PHP文件）的標準旋轉木馬代碼。

Update1：謝謝你的回答，我已經創建了一個會話，以便保存輪播應該從哪個幻燈片開始。現在的問題是：我如何獲得當前的幻燈片編號？（因爲傳送帶在x秒後循環，我需要顯示最後一張幻燈片）。

已解決：@Andrea Ajek非常感謝您的回答！它解決了我的問題也沒有使用PHP會話！

來源

2016-12-28 bluestar

這是一個相當模糊的問題，你可能會得到downvoted因爲這個原因，只是讓你知道。回到主題上，您可以通過在用戶會話，cookie或本地存儲中設置最新查看的幻燈片來實現此目的。然後通過檢查另一個頁面上的值來提取您離開的位置。 –

將一個事件監聽器放在'sliding.bs.carousel'事件上並將最新的幻燈片編號存儲在cookie中 – Mojtaba

正確的做法是不重新加載頁面的頭部部分，而是使用異步調用替換頁面內容，也使用'pushstate'更新地址。如果以其他方式進行操作，滑塊將重新加載，重新渲染並重新初始化，最後從導航時所在的幻燈片開始。最簡單的方法是使用$ _SESSION存儲來記錄當前幻燈片，每次更改。當你到一個新的頁面時，檢查你在哪個幻燈片上，並從那個頁面查看'init（）'。 –

您可以使用HTML5 WebStorage來保存上一張幻燈片索引。假設你的轉盤有一個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); 
}

來源

2016-12-29 18:24:46

如何不重置Bootstrap旋轉木馬幻燈片

回答

相關問題