7

flexslider http://www.woothemes.com/flexslider/を使用していますが、スライドの総数とシルドの数を取得したいと思います。

number of the slide/total number of the slides

たとえば、5つのスライドがあり、現在2番目のスライドにいる場合、これはスライドの下の出力になります。

2/5

「次のナビゲーション」をクリックすると、

3/5

「前のナビゲーション」の場合;

2/5

フレックススライダーで可能ですか？はいの場合、それを行う方法は？

4

6 に答える 6

12

あなたはここで答えを見つけることができます：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);

現在のスライドを（0ではなく）番号1で開始する場合は、次の操作を実行できます。

$('.current-slide').text(slider.currentSlide+1);
于 2013-08-26T16:08:23.733 に答える
10

このウェブサイトによると、コールバック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);
    }
  });
于 2013-04-12T14:39:18.597 に答える
4

ここのデモに基づいて

私はデモと他の人が以下のようなコードを生成することに気づきました：

<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;
于 2013-02-01T03:20:00.030 に答える
1

リンクするそのページのマークアップに基づいて、次のようなスライドの数を取得できます。

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

そして、あなたはアクティブなスライドの数を見つけることができます：

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

また、スライダーが変更されたときに何かを変更したい場合は、afterコールバックに何かを追加できます。

$(".mybox").flexslider({
  after: function() {
    // update the count
  }
});
于 2013-02-01T03:16:24.977 に答える
0

私は現在、スライドインデックスを生成するためにまったく同じことを行っています（ただし、PHPを使用して画像数の整数を生成しています）

スライドインデックスの要素を作成してみてください...

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

...そしてafter：functionを使用します...

$('.flexslider').flexslider({
    after: function(slider) {
        slider.find('.slideIndex').html(slider.currentSlide + 1);
    }
});
于 2013-08-21T13:02:21.437 に答える
0

スライダーを取得してから、カウントを使用します。

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

于 2015-08-27T15:30:32.020 に答える