时间戳

首页 > 解决方案 > Flickity 不是函数

jquery - Flickity 不是函数

问题描述

我正在尝试使用具有单击功能的自定义按钮来移动到下一张幻灯片。我的做法与官方示例中的完全一样：https ://codepen.io/desandro/pen/emVpdz

但我总是从控制台收到这个错误：

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

这是我的代码：

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

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

</script>

flickity 滑块可以完美运行，但外部的按钮/链接无法正常工作。

谢谢你的任何提示。最好的，L

标签： jqueryflickity

解决方案

首先确保包含 flickity.pkgd.js 和 jQuery 库作为其他评论提到的，确保在您的自定义代码之前而不是在您的代码之后加载它们。如果您已经拥有它，那么您需要使用文档就绪回调并在其中初始化代码，如下所示：

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

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

推荐阅读