使用不同的主题标签URL创建引导程序传送带幻灯片

我正尝试从另一个页面链接到引导程序传送带中的不同幻灯片，但没有结果。使用不同的主题标签URL创建引导程序传送带幻灯片

事情是这样的：

<a href="services#slide2">Link to Slide2</a>

仅供参考，这是标准的引导轮播：

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

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="img_chania.jpg" alt="Chania" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src="img_chania2.jpg" alt="Chania" width="460" height="345"> 
     </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> 
</div>

我这个尝试，但它的工作原理，只有当它是在同一页：

<a href="#" onClick="javascript:goToSlide(3);">Go to slide #4</a> 
<script> 
function goToSlide(number) { 
    $("#myCarousel").carousel(number); 
} 
</script>

即使是具有不同幻灯片的网址也可以。类似于

mydomain.com/services#slide1 
mydomain.com/services#slide2 
mydomain.com/services#slide3

来源

2016-07-07 Elaine Byene

你的意思是你想链接到不同的页面并让该页面以特定的幻灯片开始？ – Malk

您必须在页面加载时调用相同的功能。该功能需要检查号码的URL。从网址获取号码，然后将号码传递给轮播。 –

我希望幻灯片具有单独的URL，可能带有我的问题最后一节中提到的井号标签。我怎么做？我无法找到我说这个任何工作示例:( –

您需要在页面加载和传送带准备就绪后调用相同的功能。从URL哈希获取的数量并把它传递给函数：

$(document).ready(function() { 
    var number = window.location.hash.replace(/^\D+/g, '');//Get the number 
    goToSlide(number); //pass it on 
});

还需要绑定一个hashchange事件：

$(window).on('hashchange', function() { 
    var number = window.location.hash.replace(/^\D+/g, ''); 
    goToSlide(number); 
});

而且从锚标记的onclick删除

来源

2016-07-07 03:25:31

但是URL是一样的。这是直到没有井号标签mydomain.net/services补充道。我失去的东西吗？我想所有的幻灯片有mydomain.net/services#滑件，mydomain.net/services#slide2，mydomain.net/services#slide3等 –

在链接检查href属性。是否有正确的网址是什么？而且没有任何点击处理程序绑定到他们其中返回false？ –

Go to slide #2但这不工作。请注意，我是从另一个页面尝试这个，不是在同一页上。 –

使用不同的主题标签URL创建引导程序传送带幻灯片

回答

相关问题