刷新后将旋转木马放在同一张幻灯片上 [英] keep carousel on same slide after refresh

问题描述

所以我的页面上有一个引导轮播，并且我试图根据当前显示的幻灯片来更改页面的内容.我在javascript变量中具有当前幻灯片索引，但无法将值传输到php.所以我现在用GET获取值，但是除非刷新页面，否则php变量的值不会改变，但是当我刷新页面时，幻灯片会重置为第一个. 即使刷新页面后，如何让轮播仍停留在同一张幻灯片上?谢谢

so i have a bootstrap carousel on my page and i'm trying to change the content of the page depending on which slide in currently showed. i have the current slide index in a javascript variable but can't transfer the value to php. so i am now getting the value with GET but the php variable's value don't change unless i refresh the page, but when i do refresh the page the slides reset to the first one. how can i let the carousel stay on the same slide even after the page is refreshed? thank you

这是我的旋转木马:

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

先谢谢您！

推荐答案

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

这对我来说很完美！

这篇关于刷新后将旋转木马放在同一张幻灯片上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！