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

Question

我跟踪了蓝藻的官方安装指南。

我下载了最新版本的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>

...with的内容如下：

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

结果：

​

​

正如您所看到的，我遵循了安装指南，但是我得到了TypeError:在单击箭头之后，this.slidest是未定义的。我也尝试了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
                }
            );
        });

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