javascript – 使用Swiper时无法执行getComputedStyle
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 使用Swiper时无法执行getComputedStyle，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2411字，纯文字阅读大概需要4分钟。
内容图文
我在idangerous的jquery版本中使用swiper.我用require.js加载并初始化它,如下所示：
define(['jquery','swiper'],function($){
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed:100,
// If we need pagination
// Navigation arrows
nextButton: '.m-stage-button-next',
prevButton: '.m-stage-button-prev',
});
});
});<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-button-prev"></div>
<div class="m-stage-button-next"></div>
</div>(那些{{}}的东西现在只是占位符)
一切都被加载并且渲染得很好,但是一旦我尝试滑动,??我就会得到
未捕获的TypeError：无法在’Window’上执行’getComputedStyle’：参数1不是’Element’类型
任何提示？
解决方法:
而不是这个：
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>
尝试将你的DIV与外面的防尘盒分开：
<div style="width: auto; height: 300px;" class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
查看快速入门指南(第3点)以获取SwiperJS的正确HTML标记示例：
http://www.idangero.us/swiper/get-started/
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
内容总结
以上是互联网集市为您收集整理的javascript – 使用Swiper时无法执行getComputedStyle全部内容，希望文章能够帮你解决javascript – 使用Swiper时无法执行getComputedStyle所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。