2

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/

Bruno C
  • 37
  • 11
  • Can you post some code? Much of what you post here doesn't make sense without seeing what you have already tried. (Your link is dead as well.) – Parapluie Dec 29 '19 at 22:01
  • @Parapluie thanks for the reply. I have changed the link, now it's this [https://crvlh.com/work/brand-identity-saraivaassociados/]. And this is what I have tried: `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 );` – Bruno C Dec 31 '19 at 01:17
  • The issue is your not including jquery, or the flickity lib before loading this one, your find $ is undefined too.. just change the scipt loading order or wrap that file in a `window.onload = (function(){` – Lawrence Cherone Jan 01 '20 at 19:43
  • @LawrenceCherone First of all thanks for the help. I tried to change the order but it didn't work, however when I added `window.onload = (function () {` that error disappeared but another appeared and it still doesn't work... Sorry but I don't understand javascript so I may have misplaced what you said. You can see the updated code in the question – Bruno C Jan 03 '20 at 17:37
  • @BrunoC I just got back from several days in aeroports and tried your revised link. This is the first time I got it working. I was able to see that, in the console, you received the error `TypeError: $ is not a function. (In '$('.carousel')', '$' is undefined)` This possibly indicates a jQuery library conflict. Sure enough, when I checked, you are loading jQuery at lines 140 and 302. **Try eliminating one of those** and see how far you get. Also, mind the migrate file (line 141). Let us know how things go. – Parapluie Jan 04 '20 at 02:13

1 Answers1

1

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.

Parapluie
  • 714
  • 1
  • 7
  • 22
  • it's not a valuable answer and not treated as one – Raphael Dec 31 '19 at 19:18
  • @Raphael Just working with what I have been given. If you have a better idea, it would be more constructive to provide it as an answer, rather than what you have done here. – Parapluie Dec 31 '19 at 19:24