Failed to execute getComputedStyle when using Swiper

Question

I am using the swiper in the jquery version from idangerous. I load and initialize it with require.js like this:

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>

(Those {{}} thingis are right now just placeholders)

Everything is loaded and rendered fine, but as soon as I try to swipe, I get

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

Any hints?

Answer 1

Instead of this:

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

Try separating out your DIV's, with the swiper container on the outside:

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

Check the quick start guide (point 3) for an example of the correct HTML markup for SwiperJS:

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>

Answer 2

In my case, it happens in this code/scenario (I use swiperContainer - HTMLElement - more than one time ==> logos in this example).

<!-- error code use logos twice -->
<div class="swiper-container logos">
    <div class="swiper-wrapper logos">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
</div>

var mySwiper = new Swiper('.logos', {
    speed: 400
});

Throw this error:

Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos">).