Показ слайдов с Nivo Slider - PullRequest
Новая
       10

Показ слайдов с Nivo Slider

1 голос
/ 26 марта 2011

Я бы хотел показать количество слайдов как 2 of 10 на моем слайдере. Как мне заставить его работать с переходами 3 of 10, 4 of 10 (когда слайдер движется со слайдами) и 7 of 10 (если щелкнуть соответствующий эскиз)?

Ответы [ 2 ]

5 голосов
/ 27 марта 2011

Текущий слайд № можно указать как current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; Добавить 1 к нему, так как индекс начинается с 0.

Используйте атрибут afterChange, чтобы изменить номер текущего слайда при инициализации слайдера NIVO.

Итак, я получил его на 

<script type="text/javascript">
    jQuery(document).ready(function(){
        var total = jQuery('#nivo-slider img').length;
        var current_slide_no = 1; // garbage
        // var rand = Math.floor(Math.random()*total);
        jQuery('#nivo-slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown,slideInLeft'
            animSpeed:600, //Slide transition speed
            pauseTime:30000,
            directionNav:false, //Next and Prev
            // directionNavHide:true, //Only show on hover
            controlNav:true, //1,2,3...
                controlNavThumbs:true, //Use thumbnails for Control Nav
            controlNavThumbsFromRel:true, //Use image rel for thumbs
            pauseOnHover:false, //Stop animation while hovering
            //captionOpacity:0.3, //Universal caption opacity
            startSlide:0, //Set starting Slide (0 index)
            // keyboardNav:true //Use left and right arrows
            afterChange: function(){
                current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
                jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);
            }
        });
        jQuery('#nivo-slider-status').show();
        jQuery('#nivo-slider-status > .total-slides').html(total);
        current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
        jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);
    });
    </script>

, и мой html (должен быть за пределами ползунка NIVO DIV) - 

<div id="nivo-slider-status" class="alignright">
    <span class="current-slide"></span> of <span class="total-slides"></span>
</div>
0 голосов
/ 26 марта 2011

Вам нужно искать обработчик кликов и / или событие перехода.Я еще не использовал nivo, но вам нужно сделать вот что: 

parent = $('#buttons'); // button container
pages = parent.find('.button').size; // total number of pages

parent.find('.button').click(function(){
  index = parent.index($this) + 1; // this is the the page number

  //do something with these variables
  $('#div1').html(index + ' of ' + pages); 
});
...