jQuery Cycle : 이전 및 다음 단추로 사용자 정의 페이지 매기기

Question

이전의 & 다음 단추가 포함 된 페이지 매김에 대한 사용자 지정 태그가 필요한 슬라이드 쇼가 있습니다. jQuery Cycle을 사용하고 있지만 사용자 정의 호출기와 이전 & 다음 버튼 모두에서 작업하는 데 문제가 있습니다.

이

내가 좋아하는 내 호출기의 최종 결과가보고 싶은 것입니다 :

여기

<ul class="pager"> 
<li class="prev"><a href="#">Previous</a></li> 
<li class="one"><a href="#">1</a></li> 
<li class="two"><a href="#">2</a></li> 
<li class="three"><a href="#">3</a></li> 
<li class="four"><a href="#">4</a></li> 
<li class="next"><a href="#">Next</a></li> 
</ul> 

내 jQuery를주기 코드가 어떻게 생겼는지처럼 :

$(document).ready(function(){ 
$('.slides').cycle({ 
    prev: '.prev', 
    next: '.next', 
    pager: '.pager', 
    pagerAnchorBuilder: function(idx, slide) { 
     return '.pager li:eq(' + idx + ') a'; 
    } 
}); 
}); 

이 가진 문제는 그것을 취급하는 ".previous"목록 항목을 호출기의 첫 번째 슬라이드로 지정합니다. 호출기를 오프셋하여 이전 항목과 다음 항목을 무시하도록하려면 어떻게합니까?

미리 도움을 청하십시오!

Answer 1

이전/다음 링크로 사용하려는 경우 해당 li을 꺼내야합니다. 그런 다음 CSS를 사용하여 이전/다음 링크를 양식화하고 필요할 때마다 배치 할 수 있습니다. 이

마크 업

<ul class="pager"> 
<li class="prev"><a href="#">Previous</a></li> 
<li class="next"><a href="#">Next</a></li> 
</ul> 
<ul class="slides"> 
<li class="one"><a href="#">1</a></li> 
<li class="two"><a href="#">2</a></li> 
<li class="three"><a href="#">3</a></li> 
<li class="four"><a href="#">4</a></li> 
</ul> 

JS

$(document).ready(function(){ 
    $('.slides').cycle({ 
    prev: '.prev', 
    next: '.next', 
    pager: '.pager', 
    pagerAnchorBuilder: function(idx, slide) { 
     return '.pager li:eq(' + idx + ') a'; 
    } 
    }); 
});