Swiper: [Swiper React] Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

[Danetag]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 6.1.2
• Platform/Target and Browser Versions: Chrome, but issue is on every platform

What you did

Setup <Swiper> React

Expected Behavior

When I'm trying to drag/drop, the console throws the following error

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

Actual Behavior

No error should be thrown, and I should be able to drag/drop

Example:

```.tsx

{navigationItems.map((item, idx, array) => { return ( ... content ) })}

`` Also little note: thebreadcrumb-wrapperclass is not applied and I had to addslot="wrapper-start"` :/

[Danetag]

Hello! Any update around here?

[nolimits4web]

Would be good to see live example (in a form of JSFiddle, CodeSandbox, etc.)

[patric-eberle]

Had the same error when setting up the basic slider (not react related). My fault was, that I used the wrong root element.

On the official demo HTML, you need to bind the instance to .swiper-container and NOT .swiper-wrapper like I did initially.

<!-- Slider main container : Bind swiper instance to this element -->
<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>