BlueImp Carousel - TypeError this.slides [t]未定义

Question

我关注了blueimp的官方setup guide。

我下载了最新版本的blueImp（2.25.0）

首先我加入了css和js：

<!-- Blueimp Gallery -->
<link rel="stylesheet" href="../public/Gallery-2.25.0/css/blueimp-gallery.min.css">

<script src='../public/Gallery-2.25.0/js/blueimp-gallery.min.js'></script>

然后我准备了旋转木马：

<div id="blueimp-gallery-carousel" class="image blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

现在我准备好了照片：

<div id="links">

    <a href="../pcs/pic1.png"></a>
    <a href="../pcs/pic2.png"></a>
    <a href="../pcs/pic3.png"></a>

</div>

最后我添加了一个脚本：

<script src="../js/blueImp.js"></script>

...包含以下内容：

<script>
blueimp.Gallery(
    document.getElementById('links').getElementsByTagName('a'),
    {
        container: '#blueimp-gallery-carousel',
        carousel: true
    }
);
</script>

结果：

正如您所看到的，我按照设置指南操作，但是在点击箭头后，我得到 TypeError：this.slides [t]未定义。我也用2.23.0尝试过，同样的错误。

我做错了什么？

测试浏览器：

Mozilla Firefox 52.0.2（64位），Mozilla for Ubuntu

Mozilla Firefox 52.0.1（32位），Windows 7

Answer 1

我通过使用Jquerys $(document).ready(function(){ ... })

将脚本包装在底部来解决它

        $(document).ready(function() {

            blueimp.Gallery(
                document.getElementById('links').getElementsByTagName('a'),
                {
                    container: '#blueimp-gallery-carousel',
                    carousel: true
                }
            );
        });

我不明白为什么这是必要的，因为脚本被包含在最后一个位置，就在关闭正文标记之前。有什么解释吗？