I've recently tried to set up a "idangero.us Swiper" feature on my site. 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.
The error I receive is Uncaught ReferenceError: Swiper is not defined
Thank you for any help you can give. http://www.hollywoodfeed.com/pages/catalog-page-1
My HTML is
<!-- 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
<!-- 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. 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. You need to include them properly.
即使您没有将链接 swiper.js 文件的脚本标记放在 head 部分的顶部,您也会收到此错误。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.