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.

as the carousel itself is not working here can you provide a js fiddle with working carousel — atul, Sep 08 '16 at 19:03
For some reason I cant get the fiddle to work, however I am using the same basic setup that is outlined on here [jcarousellite/installation](http://www.gmarwaha.com/jquery/jcarousellite/installation.php) and working demos can be found here [jcarousellite/demo](http://www.gmarwaha.com/jquery/jcarousellite/demo.php) — Novel, Sep 08 '16 at 19:35

score 0 · Answer 1 · answered Sep 08 '16 at 19:39

0

I dont think that plugin supports that option out of the box. At least not according to the documentation.

But why dont you just put a <div> element somewhere in the slider container (or wrap it, if it messeses up st with the slider), position it absolute.

The are two callbacks you can exploit, beforeStart and afterEnd, you can use these to increment/decrement values inside the counter.

Good luck!

answered Sep 08 '16 at 19:39

Mati

1,378
15
20

That is what I thought as well but to no avail – Is there a link to a tutorial perhaps where I can learn properly about beforeStart and afterEnd and how I could implement that into a counter? – Novel Sep 08 '16 at 19:51
There is a documentation available. Im not that hungry for points to post a working code, but any tutorial explaining callbacks will do ;) – Mati Sep 09 '16 at 12:52

score 0 · Accepted Answer · answered Sep 09 '16 at 08:44

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

Thanks a lot, works like a charm – I will have a play with the bug and see if I can find a work around. — Novel, Sep 09 '16 at 09:32

jCarouselLite how can I implement a slide counter?

2 Answers2