idangero.us swiper - “Swiper 未定义”错误答案

【问题标题】：idangero.us swiper - "Swiper not defined" erroridangero.us swiper - “Swiper 未定义”错误
【发布时间】：2016-06-22 14:41:10
【问题描述】：

我最近尝试在我的网站上设置“idangero.us Swiper”功能。不幸的是，它似乎不起作用。我对 JS 的经验非常有限，所以我完全不知道如何解决这个问题。

我收到的错误是Uncaught ReferenceError: Swiper is not defined

感谢您提供的任何帮助。 http://www.hollywoodfeed.com/pages/catalog-page-1

我的 HTML 是

<!-- Swiper -->
<style>
.swiper-container{
width:100%;
height:auto;
margin:20px auto;
}
.swiper-slide{     
text-align:center;
font-size:18px;
background:#fff;
line-height:300px;
}
</style>

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

<!-- Swiper Include Files -->
<script>  {{ 'swiper.min.js' | asset_url }}</script>

<script>
  var swiper;
  $(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
})
});
</script>

【问题讨论】：

<script> {{ 'swiper.min.js' | asset_url }}</script> 在 HTML 中输出什么？

标签： javascript swiper

【解决方案1】：

在我看来，您使用的任何模板系统都没有将依赖脚本文件放在页面上。

<!-- Swiper Include Files -->
<script>  {{ 'swiper.min.js' | asset_url }}</script>

上面的脚本输出如下：

<script>     
  //cdn.shopify.com/s/files/1/0659/4529/t/75/assets/swiper.min.js?10728068994914913511
</script>

对脚本文件的引用不应在脚本元素本身内。相反，它应该在脚本标签src 属性中。像这样：

<script src="//cdn.shopify.com/s/files/1/0659/4529/t/75/assets/swiper.min.js?10728068994914913511">
</script>

tl;博士

缺少 swiper 依赖项。您需要正确地包含它们。

【讨论】：

【解决方案2】：

即使您没有将链接 swiper.js 文件的脚本标记放在 head 部分的顶部，也会出现此错误。

【讨论】：