2

I'm trying to have a custom button with a click functionality to move to the next slide. I am doing it exactly like in this official example: https://codepen.io/desandro/pen/emVpdz

But I get always this error from the console:

Uncaught TypeError: $(...).flickity is not a function

Here my code:

<script>
var $carousel = $('.main-carousel').flickity();

// previous
$('.button--previous').on( 'click', function() {
  $carousel.flickity('previous');
});

</script>

The flickity slider works perfectly but not this button/link outside.

Thanky you for any hints. Best, L

netzwerkstatt
  • 33
  • 1
  • 4
  • works for me in Chrome. – Ruslan Apr 30 '20 at 13:56
  • Check the settings in the Codepen. They've included an additional script in the page: `https://npmcdn.com/flickity@2/dist/flickity.pkgd.js`. This is what you're missing. – Rory McCrossan Apr 30 '20 at 13:59
  • check Rory's comment, and in addition check if you jQuery file is calling after the slider's JS, if not do it – Atul Rajput Apr 30 '20 at 14:04
  • Thank you for your answers! But I have already included flickity.pkgd.js and after this also jQuery. Still showing Uncaught TypeError: $(...).flickity is not a function. This is the site: https://archeoconcept.netzwerkstatt.cc/# – netzwerkstatt May 01 '20 at 08:21

2 Answers2

1

First of all make sure to include flickity.pkgd.js and jQuery library as the other comments mention, make sure to load both those before your custom code and not after your code. if you already have that then you need to use document ready callback and inside that initialize the code like this:

<script>
jQuery(document).ready(function(){
    var $carousel = $('.main-carousel').flickity();

    // previous
    $('.button--previous').on( 'click', function() {
        $carousel.flickity('previous');
    });
})
</script>
Thomas
  • 8,426
  • 1
  • 25
  • 49
Den Pat
  • 1,118
  • 10
  • 17
0

This one worked for me! and was really simple you just need to first import the jquery script then the flickity.

sajad alizada
  • 9
  • 1