0

我正在尝试加载一个简单的基于 js 的画廊 - Flickity.js

如示例中所述，我尝试加载运行良好的图库。

但随机地，画廊在页面加载时崩溃：

在此处输入图像描述

我用来启动画廊的代码：

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <script>
    $('.main-carousel').flickity({
        // options
        cellAlign: 'left',
        contain: true,
        pageDots: false,
    });
</script>

我确实明白这可能与脚本启动时的文档（未加载图像）有关，因此，我尝试包含 document.ready 函数，该函数实际上引发了另一个错误。

 $( document ).ready(function() {
     $('.main-carousel').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            pageDots: false,
        });
});

这样做的结果是，它表明 flickity 不是一个函数。

为什么会这样？

4

1 回答 1

0

尝试使用

$(window).on('load', function() {
    // your code here
});

因为$(document).ready仅在加载 DOM (HTML) 时触发。

编辑：此外，由于您使用的是 Juicer.io/embedjs，因此您应该在 Flickity 之前导入它，因为它已经包含 JQuery（并删除独立的 JQuery 导入）：

<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
    $(window).on('load', function() {
        $('.carousel').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            pageDots: false,
            adaptiveHeight: true
        });
    });
</script>

http://jsfiddle.net/pycfs5e8/

如果由于某种原因仍需要导入 JQuery，也可以使用无 JQuery 版本的 Embed（未测试）：

<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>
于 2018-12-29T19:35:44.550 回答