[英]idangero.us swiper - “Swiper not defined” error
I've recently tried to set up a "idangero.us Swiper" feature on my site.我最近尝试在我的网站上设置“idangero.us Swiper”功能。 Unfortunately, it doesn't seem to be working.不幸的是,它似乎不起作用。 My experience with JS is very limited so I'm at a complete loss on how to fix this.我对 JS 的经验非常有限,所以我完全不知道如何解决这个问题。
The error I receive is Uncaught ReferenceError: Swiper is not defined
我收到的错误是Uncaught ReferenceError: Swiper is not defined
Thank you for any help you can give.感谢您提供的任何帮助。 http://www.hollywoodfeed.com/pages/catalog-page-1 http://www.hollywoodfeed.com/pages/catalog-page-1
My HTML is我的 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>
JS JS
<!-- 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>
It looks to me that whatever templating system you are using isn't putting the dependency script file on the page.在我看来,您使用的任何模板系统都没有将依赖脚本文件放在页面上。
<!-- Swiper Include Files -->
<script> {{ 'swiper.min.js' | asset_url }}</script>
The above script outputs the below:上面的脚本输出如下:
<script>
//cdn.shopify.com/s/files/1/0659/4529/t/75/assets/swiper.min.js?10728068994914913511
</script>
The reference to the script file shouldn't be inside the script element itself.对脚本文件的引用不应位于脚本元素本身内。 Instead it should be in the script tags src
attribute.相反,它应该在脚本标签的src
属性中。 Like so:像这样:
<script src="//cdn.shopify.com/s/files/1/0659/4529/t/75/assets/swiper.min.js?10728068994914913511">
</script>
The swiper dependencies were missing.缺少 swiper 依赖项。 You need to include them properly.您需要正确地包含它们。
即使您没有将链接 swiper.js 文件的脚本标记放在 head 部分的顶部,您也会收到此错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.