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

This is a (multiple allowed):

• 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.