Bootstrap Carousel 为每张幻灯片设置不同的 URL答案

【问题标题】：Bootstrap Carousel to have different URL for each slideBootstrap Carousel 为每张幻灯片设置不同的 URL
【发布时间】：2017-01-12 05:01:28
【问题描述】：

我的引导轮播位于此处：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 :(

这是标准的引导 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 的演示屏幕截图应如下所示

【问题讨论】：

您需要为每张幻灯片提供一个 ID，并在加载时检查 location.hash 和 hashchange 事件。
这里已经有人问过了：stackoverflow.com/questions/18339638/…。将每个图像包装在一个链接中。
@gcampbell 你能做一个工作演示吗？
@NathanielFlick：这不是我想要的。我希望在幻灯片更改时更改浏览器地址栏中的 URL。不向幻灯片添加链接。
@NathanielFlick 我认为这略有不同。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

我更喜欢 html/css 人。我不擅长 javascript，也看不懂那些教程。 :(
试试看，你可以的！
如果有一些工作示例，我可能会尝试。无论如何。谢谢。等待有人帮忙。

【解决方案2】：

尝试添加以下 javascript，并在适用的情况下修改参考。您还需要向<div class="carousel-inner" role="listbox"> 添加一个ID。我在以下工作 - <div class="carousel-inner" id="listbox" role="listbox">.

childsList = Array.prototype.slice.call( document.getElementById('listbox').children );

$("#myCarousel").on('slide.bs.carousel', function (event) {
  window.location.hash = "slide" + (childsList.indexOf(event.relatedTarget) + 1);
}

这会获取幻灯片更改的事件，获取幻灯片的索引并将 URL 中的“#”设置为“#slide[幻灯片索引 + 1]”。我希望这会有所帮助。

这是一个做同样事情的小提琴，但输出到 a 而不是 URL。 https://jsfiddle.net/JokerDan/22botkvm/

【讨论】：