從AnythingSlider中的文本鏈接定位特定的幻燈片

Question

我已經得到AnythingSlider工作得很好，但我希望能夠在我的頁面頂部提供文本鏈接到確切的幻燈片。我發現其他文章提出了建議的方法，但我認爲我的方法增加了更多的複雜性，我不知道如何解決。

我在我的頁面的頂部像這樣的鏈接：

<a href="#learn</>Learn More</a> 

我已經創建了一個頁面的一部分錨定在滑塊是這樣：

<a id="learn"></a> 

立即低於這是AnythingSlider

<div id="slider"> 
    <div>Slide 1</div> 
    <div>Slide 1</div> 
    <div>Learn More Slide</div> 
</div> 

我正在做的是有鏈接帶用戶到錨s您可以預期該網站的內容，但是也會有正確的幻燈片，在這種情況下，＃panel1-3會同時加載。

我知道幻燈片是panel1-3，因爲如果我將hashTags AnythingSlider選項保留爲「true」，地址欄會刷新並顯示我的URL爲www.mysite.com/ &＃panel1-3。

是我想要做的可能嗎？

這裏是我試圖從工作職位之一： Clicking link changes url in browser bar, but doesn't actually load URL (may be AnythingSlider related)

Answer 1

首先，上面的鏈接出現畸形。它應該是這樣的：

<a href="#learn">Learn More</a> 

然後，在你的情況，我不會使用默認hashTags方法，因爲你需要一個自定義的。退房this demo，它是從文件的Home wiki page（第四鏈接下的「導航」，但使用你的佈局我已經更新了它），它使用此代碼：

HTML

<nav> 
    <!-- added class="link" in case you have links that are not tied to the slider --> 
    <a href="#cat" class="link">cat</a> 
    <a href="#grey" class="link">grey</a> 
    <a href="#bear" class="link">bear</a> 
    <a href="#random" class="link">random</a> 
    <a href="#dog" class="link">dog</a> 
</nav> 

<div id="slider"> 
    <div id="cat"> 
     <img src="http://placekitten.com/300/200" alt="" /> 
    </div> 
    <div id="grey"> 
     <img src="http://placehold.it/300x200" alt="" /> 
    </div> 
    <div id="bear"> 
     <img src="http://placebear.com/300/200" alt="" /> 
    </div> 
    <div id="random"> 
     <img src="http://lorempixel.com/300/200" alt="" /> 
    </div> 
    <div id="dog"> 
     <img src="http://placedog.com/300/200" alt="" /> 
    </div> 
</div> 

腳本

$(function() { 
    $('#slider').anythingSlider({ 
     hashTags: false, 
     // Callback when the plugin finished initializing 
     onBeforeInitialize: function (e, slider) { 
      var hash = window.location.hash; 
      if (hash && $(hash).length) { 
       slider.options.startPanel = $(hash).closest('.panel').index() + 1; 
      } 
     }, 
     onSlideComplete: function (slider) { 
      // if you use slider.$currentPage[0].id, you'll need 
      // to add an ID to each panel (<div id="cat">) 
      window.location.hash = '#' + slider.$currentPage[0].id; 
     }, 
    }); 

    $('a.link').click(function() { 
     $('#slider').anythingSlider($(this).attr('href')); 
     return false; 
    }); 

});