リフレッシュ後に同じスライドにカルーセルを残してください。

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 
    } 
});