Flickity.js вылетает при загрузке - PullRequest
Новая
       15

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

0 голосов
/ 29 декабря 2018

Я пытаюсь загрузить простую галерею на основе js - Flickity.js

Как упоминалось в примере, я попытался загрузить галерею, которая прекрасно работает.

Но случайно галерея падает при загрузке страницы:

enter image description here

код, который я использую для запуска галереи: 

<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,
        });
});

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

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

1 Ответ

0 голосов
/ 29 декабря 2018

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

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

, поскольку $(document).ready запускается только при загрузке DOM (HTML).

Редактировать : Кроме того, поскольку вы используете соковыжималку.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>
...