CODEWITHSUNDEEP
jquery
Tyler Almond
Tyler Almond

Reputation: 195

Display count number of images in carousel - jQuery

I am looking to display the number of images with-in a carousel and which image number is currently active e.g. 3/5. I am using the following plugin for the responsive carousel:

https://github.com/mrbinky3000/responsive_carousel

I have looked all over for how to do this and have had no luck and do not know where to start as my knowledge of jQuery is very little. Any help would be very much appreciated.

Here is a link to an example of the code I am using for the carousel:

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

Upvotes: 1

Views: 3652

Answers (2)

VIDesignz
VIDesignz

Reputation: 4783

Match the Images LI Container Position to the .slider-target Offset.

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

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

Here's how to count a number of elements using jQuery: http://jsfiddle.net/qMeKT/

The jQuery:

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

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

In order to display it like 3/5 or some such you'd need to see which element was currently active. Without seeing your code I can only image that the slider marks which element is active as it cycles through them. You'd just need to grab that and use it.

Upvotes: 1

Related Questions