Ориентация на конкретный слайд из текстовой ссылки в 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 загружается одновременно.

Я знаю, что слайд - панель1-3, потому что, если я оставлю параметр hashTags AnythingSlider для «истинного», адресная строка обновится и покажет мне 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> 

Script

$(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; 
    }); 

});