flex slider에서 총 슬라이드 수를 얻는 방법

Question

flex slider http://www.woothemes.com/flexslider/을 사용하고 있습니다. 이제 총 슬라이드 수와 실드 수를 얻고 싶습니다.

number of the slide/total number of the slides 

예를 들어 5 개의 슬라이드가 있고 이제 2 번째 슬라이드에있는 경우 슬라이드 아래에 출력됩니다. 나는 "다음 탐색"을 클릭하면

2/5 

이 경우 "이전 탐색"

3/5 

될 것이다;

2/5 

flexslider에서 가능합니까? 그렇다면 어떻게해야합니까?

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

그리고 당신과 함께 활성 슬라이드의 수를 찾을 수 있습니다 :

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

그리고 당신이이 같은 슬라이드의 수를 얻을 수있는 링크 해당 페이지에 마크 업을 기반으로

Answer 1

자료는 here

나는 데모를 발견하고 다른 사람은 다음과 같은 코드를 생성합니다

<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; 

Answer 2

슬라이더가 변경 될 때 무언가를 변경하려면 after 콜백에 무언가를 추가 할 수 있습니다. 데모에

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

Answer 3

이 웹 사이트에 따르면, llback API. http://www.woothemes.com/flexslider/. Flexslider를 인스턴스화 할 때 Start 및 After 콜백 메소드를 작성하고 슬라이더를 전달하십시오. 그런 다음 slider.count와 slider.currentSlide를 사용하여 필요한 것을 얻으십시오. 아래의 코드에서 $ slider_wrap, $ current_slide 및 $ total_slides는 슬라이더 수를 표시하고자하는 jQuery 객체에 할당 된 변수입니다. 첫 번째 슬라이드가 배열에서 실제로 0이기 때문에 slider.currentSlide + 1을 수행했습니다.

$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); 
    } 
    }); 

Answer 4

가 요소를 만들어보십시오 (I 이미지의 수에 대한 정수를 생성하기 위해 PHP를 사용하고 있지만 ...) 나는 현재 슬라이드 인덱스를 생성하는 데 정확히 같은 일을하고 있어요

슬라이드 지수 ...

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

... 그리고는 사용 후 : 기능 ...

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

Answer 5

대답은 여기 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); 

Answer 6

슬라이더를 취득하고 사용할 수 : : 않는

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