current slide / total number of slides

[antoine3000]

Hello, Is there a way to know the number of the current slide and the total number of slides with Flickity? It's just to display a counter, something like "4/12". (where "4" is the current slide, and "12" the total number of slides). Many thanks for considering my request, Antoine

[desandro]

Use selectedIndex and cells.length. See demo http://codepen.io/desandro/pen/bNyrqy

var $gallery = $('.gallery').flickity();
var $galleryStatus = $('.gallery-status');
var flkty = $gallery.data('flickity');

function updateStatus() {
  var cellNumber = flkty.selectedIndex + 1;
  $galleryStatus.text( cellNumber + '/' + flkty.slides.length );
}
updateStatus();
$gallery.on( 'select.flickity', updateStatus );

[antoine3000]

Thanks a lot for your works!

[emilsomm]

Hello, i am also interested in this, and looked at your demo. However the current slide number is not updated. It just remains at "1". I would greatly appreciate it if you found time to look into this one more time. Many thanks, emil

[desandro]

@emilsomm I've updated the demo to use slides.length and select.flickity for Flickity v2.

[emilsomm]

Fantastic! i'll be buying a license shortly:)

[modufolio]

This is fantastic, but it there a vanilla JS version of this example? Many thanks, Maarten

[desandro]

Sure thing. See http://codepen.io/desandro/pen/dpPzab

[dev7ch]

Dear Desandro, do you have an idea how this would usable for multiple sliders ( with the same classname) ??

[dev7ch]

function countSlides() {

    var $gallery = $('.slider').flickity({
        cellSelector: '.slider__slide',
        imagesLoaded: true,
        pageDots: false,
        wrapAround: true,
        resize:true,
    });

    var $galleryStatus = $('.slider').closest('.referenz').find('.slider__counter');
    var flkty = $gallery.data('flickity');

    function updateStatus() {
        var cellNumber = flkty.selectedIndex + 1;
        $galleryStatus.text( cellNumber + '/' + flkty.cells.length );
    }

    updateStatus();

    $gallery.on( 'cellSelect.flickity', updateStatus );
}

this is the example, but unfortunally only the first slider is counting and applys the countresult to all following sliders.

[dev7ch]

Finally i found a solution, just sharing if anybody is having the same issue ...

function countSlides() {

    $('.slider').each(function () {

        var $gallery = $(this).flickity({

            cellSelector: '.slider__slide',
            imagesLoaded: true,
            pageDots: false,
            wrapAround: true,
            resize:true,
        });

        var $galleryStatus = $(this).closest('.referenz').find('.slider__counter');
        var flkty = $gallery.data('flickity');

        function updateStatus() {
            var cellNumber = flkty.selectedIndex + 1;
            $galleryStatus.text( cellNumber + '/' + flkty.cells.length );
        }
        updateStatus();

        $gallery.on( 'cellSelect.flickity', updateStatus );

    })

}

countSlides()

[alexandrekumagae]

Dear @dev7ch, I have this same issue but your example is not working for me :/, do you have some example of this on codepen? Thanks!

[alexandrekumagae]

Finally works, I found another example that helps me: https://github.com/metafizzy/flickity/issues/433

[elemis]

How to display the numbers leading zero like "01/09"? (01 current, 09 total number of slides)

[dev7ch]

you could try sth with slice, e.g.:

var cellNumber = ("0" + flkty.selectedIndex + 1).slice(-2);

not tested, works only with positive numbers

[elemis]

@dev7ch Works great, thank you!

[kaleidografik]

Hey @desandro - I've been using your above snippet for a while now and whilst it seems to function properly, in some cases I am getting the following console error. This doesn't stop the counter from working, but I'd love to resolve it if possible as it breaks other scripts further down the page.

Thanks

Console error: Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

My code:

// Slide count
var slider = $('.flickity');
var counter = $('.slide-count');
var flkty = slider.data('flickity');

function updateStatus() {    
    var cellNumber = flkty.selectedIndex + 1;

    $(counter).text( cellNumber + '/' + flkty.slides.length );
}

 // Update when initialized
updateStatus();

// Update when cell changes
slider.on( 'select.flickity', updateStatus );

[dev7ch]

you could try sth like this to ensure deleted index is defined (not tested)

// ... 
var cellNumber = flkty.selectedIndex ? flkty.selectedIndex + 1 : 1;
// ...

or wrapping your full updateStatus into an if condition

[kaleidografik]

@dev7ch thanks for the input Silvan. Unfortunately, whilst this still functions, I continue to get the same console error?

[dev7ch]

its an undefined error, so probably you should follow the dumps of console.log(flkty); I believe the message means its excecuted too early

[kaleidografik]

@desandro Any update on this at all? Thank you!

[desandro]

@kaleidografik Please open a new issue with a reduced test case. Try forking my CodePen above. I'm locking this issue as resolved.