CODEWITHSUNDEEP
javascriptjqueryswiper.js
Myghty
Myghty

Reputation: 119

Failed to execute getComputedStyle when using Swiper

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?

Upvotes: 11

Views: 37867

Answers (7)

Galaxy IT
Galaxy IT

Reputation: 794

That's also heppened if you try to init new Swiper without slides or swiper-wrapper. I mean

<div class="swiper">
    <div class="swiper-wrapper"></div>
</div> 
<script>
    new Swiper('.swiper', {...})
</script>

OR

<div class="swiper">

</div>    
<script>
    new Swiper('.swiper', {...})
</script>

Upvotes: 0

Uriahs Victor
Uriahs Victor

Reputation: 1155

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

Upvotes: 0

NigelDcruz
NigelDcruz

Reputation: 927

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
});

Upvotes: 0

Ezra Siton
Ezra Siton

Reputation: 7741

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: enter image description here

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

Upvotes: 6

wojjas
wojjas

Reputation: 1086

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.

Upvotes: 0

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14764

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>

Upvotes: 8

Myghty
Myghty

Reputation: 119

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.

Upvotes: 0

Related Questions