使用不同的主題標籤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創建引導程序傳送帶幻燈片

回答

相關問題