是否有一种方法可以通过向URL地址添加不同的名称来显示自举的旋转木马的不同幻灯片

Question

我正在看bootstrap旋转木马滑块http://startbootstrap.com/template-overviews/full-slider/，我想知道是否有一种通过其名称到达特定幻灯片的方法。到目前为止，这就是我定义轮播指标的方式：

<ol class="carousel-indicators carousel-indicators-orange">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" id="businessCarousel" data-slide-to="1"></li>
</ol>

，当我访问www.mydomain.com时，我总是会看到第一个幻灯片。但是，有没有一种自定义的方法，以便当用户键入www.mydomain.com/second时，他会看到带有第二个幻灯片的网页？

我尝试将name=添加到每个轮播指示器中，但这没有预期。感谢您的任何线索！

Answer 1

您通过指定要开始的幻灯片来完成此操作：

// parse the page number you want from window.location.href
$('.carousel').carousel(slideToStart);

Answer 2

您可以在地址栏中使用哈希进行此操作。例如，" www.mydomain.com/#second"具有页面加载后检查哈希并将活动类更改为第二幻灯片的功能。

这是代码：

$(function(){
    hash = window.location.hash;
    if(hash !== ''){//If there's a hash
        $('.carousel-inner .item .active').removeClass('active');
        $(hash).addClass('active');
    }
});

注意：您需要在.carousel-inner内部的每个.item上添加ID，因此脚本可以"激活"具有与哈希相同的ID的.item。

Answer 3

使用

形式的哈希URL

www.mydomain.com＃sdt0 用于数据幻灯片0

www.mydomain.com＃sdt1 用于数据幻灯片1

从URL获取位置哈希，然后在此之后 data-slide-to值

var hash = window.location.hash;
var data-slide-to = hash.split('sdt')[1];

为了使活动幻灯片，请尝试此示例

$("li[data-target=#myCarousel]")
  .removeClass("active")
  .each(function () {
    if ($(this).prop("data-slide-to") == data-slide-to) {
      $(this).addClass("active");
    }
});