Как удалить номера для пейджера в плагине цикла jquery - PullRequest
Новая
       24

Как удалить номера для пейджера в плагине цикла jquery

0 голосов
/ 23 августа 2011

Я пытаюсь удалить числа из пейджера, сгенерированного при использовании плагина цикла jquery.Цифры, кажется, отображаются только в IE, но мне все еще нужно их удалить.У меня есть код: 

<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-one.jpg); background-position:top center; background-repeat:repeat-x;" ></div>
<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-two.jpg); background-position:top center; background-repeat:repeat-x;" ></div>
<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-one.jpg); background-position:top center; background-repeat:repeat-x;" ></div>
<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-two.jpg); background-position:top center; background-repeat:repeat-x;" ></div>

</div><!--End Homepage Slider-->

<div class="feature_nav"></div>

и 

<script>
     // start slideshow 
    $('#homepage_slider').cycle({ 
        timeout:  7000, 
      //  before:   onBefore ,
        next:   '.feature_next',
        prev:   '.feature_prev',
        pager:  '.feature_nav'
    });
</script>

Я уверен, что есть простой способ сделать это, что я пропускаю.Может ли кто-нибудь помочь, пожалуйста?

Ответы [ 3 ]

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

Некоторая документация доступна здесь: http://jquery.malsup.com/cycle/pager2.html

$('#homepage_slider').cycle({ 
    timeout:  7000, 
  //  before:   onBefore ,
    next:   '.feature_next',
    prev:   '.feature_prev',
    pager:  '.feature_nav',
    pagerAnchorBuilder: function(idx, slide) { 
        return foo;  //Where foo is whatever contents you want in each pager anchor.
    } 
});
0 голосов
/ 21 февраля 2014

Вот мой код, который отлично работает.

HTML 

<div id="slider" class="pics">
        <img src="images/beach1.jpg" width="200" height="200" />
        <img src="images/beach2.jpg" width="200" height="200" />
        <img src="images/beach3.jpg" width="200" height="200" />
        <img src="images/beach4.jpg" width="200" height="200" />
        <img src="images/beach5.jpg" width="200" height="200" />
        <img src="images/beach6.jpg" width="200" height="200" />
        <img src="images/beach7.jpg" width="200" height="200" />
        <img src="images/beach8.jpg" width="200" height="200" />
    </div>
<ol class="pager"></ol>

JS 

$('#slider').cycle({
                 fx: 'fade', 
         pager:  '.pager',     
            // callback fn that creates a thumbnail to use as pager anchor 
            pagerAnchorBuilder: function(idx, slide) { 
                            return '<a href="#"></a>'; //what you want ti return like '<li></li>'
            }

    });

Вывод: вы видите 

<ol class="pager">
  <a href="#" class=""></a>
  <a href="#" class="activeSlide"></a>
</ol>

как вывод пейджера, может добавлять стили CSS для класса пейджера.

0 голосов
/ 23 августа 2011

Если вы не хотите пейджер, то удалите это из своего кода. pager: '.feature_nav'

...