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

Question

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

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

number of the slide/total number of the slides

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

2/5

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

3/5

Если "prev nav";

2/5

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

547 6

jQuery javascript flexslider

6 ответов:

Comments

Ничего не найдено.

pktangyue · Accepted Answer · 2013-02-01 05:20:00

Базируемся на демо здесь

Я замечаю, что демо и другие создадут код, как показано ниже:
<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;

Leissa · Accepted Answer · 2014-10-23 22:55:40

Вы можете найти ответ здесь: 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>
Если вы хотите, чтобы даже первый слайд был засчитан, вы можете добавить в функцию start:
$('.current-slide').text(slider.currentSlide);
Если вы хотите, чтобы текущий слайд начинался с числа 1 (а не 0), вы можете сделать:
$('.current-slide').text(slider.currentSlide+1);

Kyle · Accepted Answer · 2013-04-12 17:39:18

Согласно этому веб-сайту, вы можете сделать это с помощью callback 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);
    }
  });

ericponto · Accepted Answer · 2013-02-01 05:16:24

На основе разметки на этой странице, которую вы связываете, вы можете получить количество слайдов, таких как:
$(".slides").find("li").length
И вы можете найти номер активного слайда с помощью:
$(".slides").find("li.flex-active-slide").index() + 1;
И если вы хотите что-то изменить при изменении слайдера, вы можете добавить что-то к обратному вызову after.
$(".mybox").flexslider({
  after: function() {
    // update the count
  }
});

Ed Williams · Accepted Answer · 2014-06-16 14:50:47

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

Попробуйте создать элемент для индекса слайда...
<p class="slideIndex"></p>
...и используйте функцию после:...
$('.flexslider').flexslider({
    after: function(slider) {
        slider.find('.slideIndex').html(slider.currentSlide + 1);
    }
});

kalifa17 · Accepted Answer · 2015-08-27 18:30:32

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

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