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

I don't exactly know, what the failure was. I switched to Swiper 2.7.x and this worked without a single problem.

Seems like Swiper 3.x and Require with almond have some problems at the moment.

Answer 2

The quickest solution for this is to remove the CLASS 'logos' and add it as an ID 'logos' to the same element. After that select the ID as the selector in your javascript file.

Eg: HTML

<div id="logos" class="swiper-container"> <!-- This line is edited -->
    <div class="swiper-wrapper logos">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
</div>

Eg: JavaScript

//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', { 
    speed: 400
});

Answer 3

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 4

This happened to me when i tried to use some code provided from a tutorial...I checked the official docs and used their example and it worked without problems

https://swiperjs.com/get-started

Answer 5

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">).

Answer 6

I am using the swiper from idangerous in an Angular 1.5 application. I got the same error when swiping slides with mouse, no error changing slides by clicking on arrows. For me this was a timing issue. I solved it by moving the init of the swiper var mySwiper = new Swiper('.swiper-container', {... to where the view was done rendering.