javascript - Bootstrap Carousel 为每张幻灯片设置不同的 URL

Question

我的 bootstrap carousel 位于:testdomain.org/about.html，当幻灯片发生变化时，地址栏中的 URL 保持不变。我希望 URL 在幻灯片变为如下内容时自动更改:

https://testdomain.org/about.html#slide1
https://testdomain.org/about.html#slide2
https://testdomain.org/about.html#slide3

我们怎样才能做到这一点？我创建了这个 JSFiddle Demo为了您的方便。我不知道如何为此编写 JS :(

这是标准的 Bootstrap HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

地址栏中 URL 的 DEMO 屏幕截图应如下所示

Answer 1

使用轮播事件确定何时发生幻灯片转换以及激活了哪张幻灯片。然后使用幻灯片 URL 更新地址栏和浏览器历史记录。两者的说明位于以下链接中:

http://getbootstrap.com/javascript/#carousel-events

Updating address bar with new URL without hash or reloading the page