Цикл jQuery: пользовательская нумерация страниц с кнопками «Предыдущая» и «Следующая» - PullRequest
Новая
       37

Цикл jQuery: пользовательская нумерация страниц с кнопками «Предыдущая» и «Следующая»

2 голосов
/ 24 августа 2011

У меня есть слайд-шоу, которое требует пользовательской разметки для нумерации страниц, которая также включает кнопки «предыдущий» и «следующий».Я использую 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 Cycle: 

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

Проблема в том, что он обрабатывает элемент списка «.previous» как первый слайд впейджер.Как сместить пейджер, чтобы он игнорировал предыдущий и следующий элементы?

Заранее спасибо за помощь!

1 Ответ

1 голос
/ 24 августа 2011

Вы должны убрать эти ссылки, если хотите использовать их в качестве ссылок «предыдущая / следующая».Затем вы можете стилизовать ссылки «предыдущий / следующий» с помощью 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'; 
    } 
  });
});
...