jCarouselLite how can I implement a slide counter?

Question

I cant find a suitable answer for this but I am sure somebody must have done this before.

I am using JCarouselLite and I would like to implement a simple slide counter that looks like "1/20" for example but I cant find any solution to this.

Here is my HTML

<div class="page-carousel">        
    <div class="carousel">
        <ul>
            <li><img id="caption" src="img/img-01.jpg" alt="1"><h3>caption</h3></li>
            <li><img id="caption" src="img/img-02.jpg" alt="2"><h3>caption 2</h3></li>
            <li><img id="caption" src="img/img-03.jpg" alt="3"><h3>caption 3</h3></li>
        </ul>
    </div>
</div>

And my JS settings for the carousel

$().ready(function() { $(".carousel").jCarouselLite({ visible: 2, auto: 2, scroll: 2, mouseWheel: true, timeout: 6000, speed: 800, swipe: true, circular: true, btnNext: ".next", btnPrev: ".prev", autoWidth: true, responsive: true }); });

Any help would be very much appreciated – I am totally stuck on this one.

Answer 1

Create a div with some id (e.g #count) and place where ever you want it on your page. Then in javascript do this

$().ready(function() {
    $(".carousel").jCarouselLite({
    visible: 2,
    auto: 2,
    scroll: 2,
    mouseWheel: true,
    timeout: 6000,
    speed: 800, 
    swipe: true,
    circular: true,
    btnNext: ".next", 
    btnPrev: ".prev",
    autoWidth: true,
    responsive: true,    
    afterEnd: function(currentItems) {
      var item1 = $(currentItems[0]).index()-1;
      var item2 = $(currentItems[1]).index()-1;
      var visible = 2;
      var totalItem = $(".carousel").find("li").length - (visible * 2);
      $("#count").html("Showing "+ item1 + " and " + item2 + " of " +totalItem);
    }
});

Here currentItems contains the number of visible image which you define in the visible property of the plugin. I dont know why this plugin the duplicating the images at the begning and at the end of the image list equal to the value specified for the visible property of the plugin. therefore you need to do something like this

var visible = 2;
var totalItem = $(".carousel").find("li").length - (visible * 2);

Note there is a bug when you are on the last image and click the next button and same thing when you are on the first image and click the prev button, you need to fix that by yourself ;)