1

カルーセル内の画像の数と、現在アクティブな画像番号（3/5など）を表示したいと考えています。レスポンシブカルーセルに次のプラグインを使用しています。

https://github.com/mrbinky3000/response_carousel

私はこれを行う方法をあちこち探してきましたが、運がなく、jQueryに関する知識がほとんどないため、どこから始めればよいのかわかりません。どんな助けでも大歓迎です。

カルーセルに使用しているコードの例へのリンクは次のとおりです。

http://matthewtoledo.com/creations/response-carousel/example/example-1.html

4

2 に答える 2

1

jQueryを使用して要素の数をカウントする方法は次のとおりです。http：//jsfiddle.net/qMeKT/

jQuery：

var n = $("div img").length;
jQuery("#count").html(n);

HTML：

<div class="container">
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
</div>

3/5などのように表示するには、現在アクティブになっている要素を確認する必要があります。あなたのコードを見ずに、スライダーがそれらを循環するときにどの要素がアクティブであるかをマークすることだけを想像することができます。あなたはそれをつかんでそれを使う必要があるでしょう。

于 2012-11-06T17:08:49.117 に答える
1

ImagesLIコンテナの位置を.slider-targetオフセットに一致させます。

HTML

<div class="slider-mask">
     <ul class="slider-target">
          <li>
             <img src="img/01.jpg">
          </li>
          <li>
             <img src="img/02.jpg">
          </li>
          <li>
             <img src="img/03.jpg">
          </li>     
          <li>
             <img src="img/04.jpg">
          </li>                                     
       </ul>
       div class="clearfix"></div>
</div>

<div id="count"></div>

JQuery

function matchimage() {
    var targetposition =  Math.abs($('.slider-target').position().left);
    var matchthis = targetposition;
    var visible = $('.slider-target li').filter(function () { return $(this).position().left == matchthis }).index();
    var total = $('.slider img').length;
    $("#count").html((visible + 1) + ' of ' + total); 
}
于 2012-11-06T17:28:27.947 に答える