Flickity.js вылетает при загрузке

Question

Я пытаюсь загрузить простую галерею на основе 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,
        });
});

результат этого, это показывает, что легкомысленность не является функцией.

почему это происходит?

Answer 1

Попробуйте использовать

$(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, вы также можете использовать Embed без версии JQuery (не тестировалась):

<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>