javascript - 使用 Swiper 时无法执行 getComputedStyle

Question

我正在使用来自 idangerous 的 jquery 版本中的滑动器。我像这样使用 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>

(那些 {{}} 东西现在只是占位符)

一切都已加载并呈现良好，但当我尝试滑动时，我得到了

未捕获的类型错误:无法在“窗口”上执行“getComputedStyle”:参数 1 不是“元素”类型

有什么提示吗？

Answer 1

取而代之的是:

<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>

尝试将您的 DIV 与外部的 swiper 容器分开:

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