Javascript idangero.us swiper-“美国；“未定义开关”；错误

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

我收到的错误是

Uncaught ReferenceError:未定义Swiper

谢谢你能给我的帮助。

我的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容器{
宽度：100%；
高度：自动；
保证金：20px自动；
}
.swiper幻灯片{
文本对齐：居中；
字号：18px；
背景：#fff；
线高：300px；
}
幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10

JS

{{'swiper.min.js'| asset_url}
无功开关；
$（文档）.ready（函数（）{
var swiper=新的swiper（“.swiper容器”{
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
分页：'.swiper分页'，
分页类型：“分数”
})
});

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

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

---

tl；博士

---

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

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

HTML中的

{{swiper.min.js'| asset_url}

输出是什么？

<!-- 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>

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