BxSlider 탐색 링크에서 슬라이드를 특정 슬라이드로 변경 클릭

탐색 메뉴 항목을 클릭하면 BxSlider 슬라이드가 특정 슬라이드로 변경됩니다. 탐색 항목이 목록의 두 번째 항목 인 경우 BxSlider가 두 번째 슬라이드를 표시하도록합니다.BxSlider 탐색 링크에서 슬라이드를 특정 슬라이드로 변경 클릭

내 탐색 구조는 다음과 같습니다 당신이 클릭에 대한 앵커를 설정하려고 시도 것 같은

<html> 
<ul id="pagination" class="clearfix"> 
<li><a href="#">Voter Tools</a></li> 
<li><a href="#">Candidate Tools</a></li> 
<li><a href="#">Ballot Issues</a></li> 
<li><a href="#">Data &amp; Resources</a></li> 
<li><a href="#">Poll Workers</a></li> 
<li><a href="#">Press &amp; Public</a></li> 
<li><a href="#">Links</a></li> 
</ul><!-- /#pagination --> 
</html>

출처

2016-07-20 Chad

것 같습니다. http://bxslider.com/options#pagerCustom

귀하의 앵커가 추가로 적절하게 기능하기 위해 데이터 슬라이드 인덱스가 필요합니다 :

<ul id="pagination" class="clearfix"> 
<li><a data-slide-index="0" href="#">Voter Tools</a></li> 
<li><a data-slide-index="1" href="#">Candidate Tools</a></li> 
<li><a data-slide-index="2" href="#">Ballot Issues</a></li> 
<li><a data-slide-index="3" href="#">Data &amp; Resources</a></li> 
<li><a data-slide-index="4" href="#">Poll Workers</a></li> 
<li><a data-slide-index="5" href="#">Press &amp; Public</a></li> 
<li><a data-slide-index="6" href="#">Links</a></li> 
</ul><!-- /#pagination -->

나는 당신이 있으리라 믿고있어 나는 bxSlider의 "pagerCustom"매개 변수로보고 좋을 걸 클릭 가능한 요소에 대한 코드를 제공하고 슬라이드 쇼의 실제 목록 항목은 다른 곳에 있습니다. 의 라인을 따라 뭔가 :

<ul class="bxslider"> 
    <li><img src="/images/Voter_Tools.jpg" /></li> 
    <li><img src="/images/Candidate_Tools.jpg" /></li> 
    <li><img src="/images/Ballot_Issues.jpg" /></li> 
    <li><img src="/images/Data_and_Resources.jpg" /></li> 
    <li><img src="/images/Poll_Workers.jpg" /></li> 
    <li><img src="/images/Press_and_Public.jpg" /></li> 
    <li><img src="/images/Links.jpg" /></li> 
</ul>

당신은 bxSlider의 pagerCustom 매개 변수에 미리/앵커 컨테이너 ("#pagination")를 선택기를 통과 할 수 있어야한다. 라이브러리가 나머지를 처리합니다!

$('.bxslider').bxSlider({ 
    pagerCustom: '#pagination' 
});

바이올린 : http://jsfiddle.net/drjeg422/2/ (참고 : 이미지가 존재하지 않는)

출처

2016-07-20 23:09:08 Hodrobond

BxSlider 탐색 링크에서 슬라이드를 특정 슬라이드로 변경 클릭

답변

관련 문제