刷新後在同一張幻燈片上保留傳送帶

Question

因此，我的頁面上有一個引導傳送帶，我試圖根據當前顯示的哪張幻燈片更改頁面的內容。我有一個JavaScript變量的當前幻燈片索引，但不能將值傳遞給php。所以我現在使用GET來獲取值，但除非刷新頁面，否則php變量的值不會更改，但是當我刷新頁面時，幻燈片會重置爲第一個。 即使在頁面刷新後，我如何讓旋轉木馬仍保持在同一張幻燈片上？謝謝

，這是我的旋轉木馬：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 

<ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1" ></li> 
    <li data-target="#myCarousel" data-slide-to="2" ></li> 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
    <li data-target="#myCarousel" data-slide-to="4"></li> 
    <li data-target="#myCarousel" data-slide-to="5"></li> 
    <li data-target="#myCarousel" data-slide-to="6"></li> 
    <li data-target="#myCarousel" data-slide-to="7"></li> 
    <li data-target="#myCarousel" data-slide-to="8"></li> 
    <li data-target="#myCarousel" data-slide-to="9"></li> 
    <li data-target="#myCarousel" data-slide-to="10"></li> 
</ol> 


<div class="carousel-inner"> 
    <div class="item active"> 
    <img src="images/wisp.png" alt="WISP" style="width:100%;"> 
    </div> 

    <div class="item"> 
    <img src="images/linkme.png" alt="linkme" style="width:100%;"> 
    </div> 

    <div class="item"> 
    <img src="images/zainent.png" alt="zain" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/tahadi.png" alt="tahadi" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/onelife.png" alt="onelife" style="width:100%;"> 
    </div> 
<div class="item"> 
    <img src="images/alavina.png" alt="alavina" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/iha.png" alt="iha" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/runnuts.png" alt="runnuts" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/oliviafred.png" alt="oliviafred" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/bandicoot.png" alt="bandicoot" style="width:100%;"> 
    </div> 
    <div class="item"> 
    <img src="images/bassama.png" alt="bassama" style="width:100%;"> 
    </div> 
</div> 


<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="return chooseit()"> 
    <span class="glyphicon glyphicon-chevron-left"></span>  
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="return chooseit()"> 
    <span class="glyphicon glyphicon-chevron-right"></span>  
</a> 

，這是我的腳本：

 function chooseit() { 
var numbit = $('div.active').index() + 1; 
history.pushState(null, null, '/work.php?id='+numbit); 
} 



$(function(){ 
     var carousel = $('.carousel ul'); 
     var carouselChild = carousel.find('li'); 
     var clickCount = 0; 

     itemWidth = carousel.find('li:first').width()+1; //Including margin 

     //Set Carousel width so it won't wrap 
     carousel.width(itemWidth*carouselChild.length); 

     //Place the child elements to their original locations. 
     refreshChildPosition(); 

     //Set the event handlers for buttons. 
     $('.btnNext').click(function(){ 
      clickCount++; 

      //Animate the slider to left as item width 
      carousel.finish().animate({ 
       left : '-='+itemWidth 
      },300, function(){ 
       //Find the first item and append it as the last item. 
       lastItem = carousel.find('li:first'); 
       lastItem.remove().appendTo(carousel); 
       lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth)); 
      }); 
     }); 

     $('.btnPrevious').click(function(){ 
      clickCount--; 
      //Find the first item and append it as the last item. 
      lastItem = carousel.find('li:last'); 
      lastItem.remove().prependTo(carousel); 

      lastItem.css('left', itemWidth*clickCount);    
      //Animate the slider to right as item width 
      carousel.finish().animate({ 
       left: '+='+itemWidth 
      },300); 
     }); 

     function refreshChildPosition(){ 
      carouselChild.each(function(){ 
       $(this).css('left', itemWidth*carouselChild.index($(this))); 
      }); 
     } 

     function refreshChildPositionNext(){ 
      carouselChild.each(function(){ 
       leftVal = parseInt($(this).css('left')); 
      }); 
     } 
    }); 

預先感謝您！

Answer 1

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

這個工作完美的我！

Answer 2

您可以將當前幻燈片編號存儲爲局部變量。

localStorage.setItem('slide', activeSlideNumber)

然後，當文檔載入，檢查是否在存儲器中存在滑動變量如下。

$(function() { 
    var slide = localStorage.getItem('slide'); 
    if (slide === null) { 
     // start from the top 
    } else { 
     // start from slide number in storage 
    } 
});