Question

我正在查看引导旋转木马滑块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

以

的形式使用散列网址

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

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

从网址获取位置哈希值，然后获取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");
    }
});

Answer 2

您可以通过指定要开始的幻灯片来执行此操作：

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

Answer 3

您可以在地址栏中使用哈希来执行此操作。例如“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');
    }
});

注意：您需要为.item内的每个.carousel-inner添加一个ID，这样脚本就可以“激活”与哈希值相同的.item。

有没有办法通过在URL地址添加不同的名称来显示引导轮播的不同幻灯片？

3 个答案: