Swiper: Slides disappear to the left when moving backwards using loop and centered mode.

[darrena092]

This is a (multiple allowed):

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

• Swiper Version: Both 4.0.1 and 4.0.2
• Platform/Target and Browser Versions: Chrome on Windows
• Demonstration of behavior:
  

What you did

I created a swiper instance using the following code:

Javascript

var carousel = new Swiper('.swiper-container', {
        direction: 'horizontal',
        centeredSlides: true,
        slidesPerView: 3,
        spaceBetween: 5,
        navigation: {
            nextEl: '.button-next',
            prevEl: '.button-prev'
        },
        slidesOffsetBefore: 400,
        loop: true
    });

HTML

<section class="main-carousel">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="top-bar"></div><img src="{{ asset('img/carousel/img1.jpg') }}">
                <div class="info-wrapper">
                    <h2>Skainos<br/>Project</h2>
                    <h3>Belfast</h3>
                    <p>
                        Test text.
                    </p>
                    <a href="#" class="btn btn-default">See Project</a>
                    <div class="swiper-controls">
                        <button class="fa fa-chevron-left button-prev"></button>
                        <button class="fa fa-chevron-right button-next"></button>
                    </div>
                </div>
            </div>
            <div class="swiper-slide"><div class="top-bar"></div><img src="{{ asset('img/carousel/img2.jpg') }}">
                <div class="info-wrapper">
                    <h2>Skainos<br/>Project</h2>
                    <h3>Belfast</h3>
                    <p>
                        Test text.
                    </p>
                    <a href="#" class="btn btn-default">See Project</a>
                    <div class="swiper-controls">
                        <button class="fa fa-chevron-left button-prev"></button>
                        <button class="fa fa-chevron-right button-next"></button>
                    </div>
                </div>
            </div>
            <div class="swiper-slide"><div class="top-bar"></div><img src="{{ asset('img/carousel/img3.jpg') }}">
                <div class="info-wrapper">
                    <h2>Skainos<br/>Project</h2>
                    <h3>Belfast</h3>
                    <p>
                        Test Text
                    </p>
                    <a href="#" class="btn btn-default">See Project</a>
                    <div class="swiper-controls">
                        <button class="fa fa-chevron-left button-prev"></button>
                        <button class="fa fa-chevron-right button-next"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Expected Behavior

I expect that the slides should loop both forward and backwards without issue.

Actual Behavior

Slides loop forward (to the right) without any issue, however when moving backwards (to the left), the slides disappear once I hit the first slide, then reappear again.

[darrena092]

Strangely enough if I use breakpoints for smaller screen sizes the issue doesn't occur on these screen sizes:

breakpoints: {
            991: { //sm-max
                slidesPerView: 1,
                slidesOffsetBefore: 1,
                spaceBetween: 10
            },
            1199: { //md-max
                slidesPerView: 2,
                slidesOffsetBefore: 200,
                spaceBetween: 10
            }
        }

[teckes]

have you tried to add the "loopAdditionalSlides" option?
loopAdditionalSlides: 2

[benwallis]

Same issue here.

Still happening on Swiper version: 4.1.6

https://codepen.io/anon/pen/vdxKVW

Adding "loopAdditionalSlides" and/or "loopedSlides" doesn't seem to make any difference.

[alberto-coolshop]

Any idea on which piece of code is responsible for this issue?
I could spend some time working on it if somebody would point me in the right direction ;)

[benwallis]

If you comment out "centeredSlides: true", then the issue doesn't happen.

[zabojad]

Indeed with centeredSlides: true commented, the issue doesn't happen. But still, that's a bug.

In my case, I have the problem with the following options:

        {
            slidesPerView: 3,
            loop: true,
            centeredSlides: true,
            effect: 'coverflow',
            loopAdditionalSlides: 2,
            coverflowEffect: {
                rotate: 0,
                slideShadows: false,
                depth: 500,
                stretch: -50,
            }
        }

and only when I have 3 slides in my slideshow (from 4, it does not happen neither).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[benwallis]

Still happening on 4.3.3, though it is slightly better.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.