CODEWITHSUNDEEP
javascriptflickity
Bruno C
Bruno C

Reputation: 27

Flickity carousel slide number and length

I'm using a Flickity carousel in my website and I found the piece of code (link below) that allows me to see the slide number and length.

https://codepen.io/desandro/pen/dpPzab

After placing that in my website it didn't work and I get this message in the console "ReferenceError: Can't find variable: Flickity"

Code:

window.onload = (function(){
var $carousel = $('.carousel').flickity(); 
var $carouselStatus = $('.carousel-status'); 
var flkty = $carousel.data('flickity'); 
function updateStatus() { 
  var cellNumber = flkty.selectedIndex + 1; 
  $carouselStatus.text( cellNumber + '/' + flkty.slides.length ); 
} 
updateStatus(); 
$carousel.on( 'change.flickity', updateStatus );

Can you give me a hand? here you can find the page (still in progress) where I have the carrousel https://crvlh.com/work/brand-identity-la-fete/

Upvotes: 2

Views: 1944

Answers (1)

Parapluie
Parapluie

Reputation: 736

It looks like you are building your carousel array in javascript.

To add a counter and output a slide number, you could incorporate a loop somewhere in your code. I don't see all of your code, so I can not tell you exactly how to do this, but here is a working sample of how to build such a loop:

var count = 0;
for(var s = 0; i < flkty.length; ++s){
    [do something with the flkty array here: 
     output the index num, etc]
    count++;
}

Let me know how this works out.

Upvotes: 1

Related Questions