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> 

은 내가 무엇을 찾고 있어요 링크가 앵커의 사용자를 가지고있는 것입니다 당신과 같은 사이트의 역할은 기대할 것이지만 동시에 정확한 슬라이드 (이 경우 # panel1-3)가 동시에로드됩니다.

hashtags AnythingSlider 옵션을 true로 유지하면 검색 주소창이 새로 고침되고 URL이 www.mysite.com/ & # panel1-3 인 것을 보여주기 때문에 슬라이드가 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; 
    }); 

});