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:

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