как получить общее количество слайдов в flexslider

Я использую flexslider http://www.woothemes.com/flexslider/, теперь я хочу получить общее количество слайдов и количество sildes.

number of the slide/total number of the slides

например, если у меня есть 5 слайдов, и я сейчас на 2-м слайде, так что это будет выход ниже слайдов.

2/5

если я нажму "next nav", он станет

3/5

если "prev nav";

2/5

это возможно в flexslider? если да, то как это сделать?

7
flexslider javascript jquery

6 ответов

база на демо здесь

Я замечаю, что демо и другие будут генерировать код, как показано ниже:

<ol class="flex-control-nav flex-control-paging">
    <li><a class="">1</a>
    </li>
    <li><a class="flex-active">2</a>
    </li>
    <li><a>3</a>
    </li>
    <li><a>4</a>
    </li>
</ol>

таким образом, согласно этому, вы можете получить то, что хотите, используя код:

var index = $('li:has(.flex-active)').index('.flex-control-nav li')+1;
var total = $('.flex-control-nav li').length;
4

вы можете найти ответ здесь:http://www.woothemes.com/flexslider.

    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          controlsContainer: ".flex-container",
          start: function(slider) {
            $('.total-slides').text(slider.count);
          },
          after: function(slider) {
            $('.current-slide').text(slider.currentSlide);
          }
       });
     });
    </script>

Если вы хотите, чтобы даже первый слайд был подсчитан, вы можете добавить в функцию запуска:

$('.current-slide').text(slider.currentSlide);

Если вы хотите, чтобы текущий слайд начинался с номера 1 (не 0), вы можете сделать:

$('.current-slide').text(slider.currentSlide+1);
12

согласно этому веб-сайту, вы можете сделать это с помощью API обратного вызова. http://www.woothemes.com/flexslider/. Напишите метод Start и After callback при создании экземпляра flexslider и передайте ползунок. Затем используйте слайдер.граф и слайдер.currentSlide, чтобы получить то, что вам нужно. В моем коде ниже $slider_wrap, $current_slide и $total_slides-это просто переменные, назначенные объектам jQuery, где я хотел отобразить количество слайдеров. Я сделал слайдер.currentSlide+1 за первый слайд фактически равен 0 в массиве.

$slider_wrap.flexslider({
    start: function(slider){
      $current_slide.html(slider.currentSlide+1);
      $total_slides.html(slider.count);
    },
    after: function(slider){
      $current_slide.html(slider.currentSlide+1);
      $total_slides.html(slider.count);
    }
  });
10

на основе разметки на этой странице вы ссылаетесь вы можете получить количество слайдов, как это:

$(".slides").find("li").length

и вы можете найти номер активного слайда с:

$(".slides").find("li.flex-active-slide").index() + 1;

и если вы хотите что-то изменить при изменении слайдера, вы можете добавить что-то в after обратный.

$(".mybox").flexslider({
  after: function() {
    // update the count
  }
});
1

в настоящее время я делаю то же самое, чтобы сгенерировать индекс слайда (...хотя я использую PHP для генерации целого числа для количества изображений)

попробуйте создать элемент для индекса слайд...

<p class="slideIndex"></p>

...и используйте функцию after:...

$('.flexslider').flexslider({
    after: function(slider) {
        slider.find('.slideIndex').html(slider.currentSlide + 1);
    }
});
0

получить ползунок, а затем использовать count:

$(yourslider).data('flexslider').count

0