Prev and Next slide are shown while they shouldn't

[nicktc]

I am developing our corporate website, and I had swiper working :-). Now it's broken. It still animates the slides, and shows them. Problem is that next to the active slide now also the prev and next slide are displayed left and right of the active slide. I tried to debug, but couldn't find what triggers a slide from being shown or not. I saw that with transform the slides are moved in, but the part that makes them visible or invisible is yet unknown for me. What could be the cause that the prev and next slide is showing? I am using version 7.

Update:
When I set effect: 'flip' it is nicely working. So seems to be a problem with some of the effects, since also the effect 'fade' shows them stacked. So also with the fade effect the prev and next are be shown (although on the same location as the active).

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/css/bundle';

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        // effect: 'flip',
        loop: false,
        autoplay: {
            delay: 3500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'custom',
            bulletElement: '',
            renderCustom: function (swiper, current, total) {
                var text = "";
                for (let i = 1; i <= total; i++) {
                    if (current == i) {
                        text += '<div class="inline-block w-3 h-3 rounded bg-orange' + ((i==1) ? '' : ' ml-1') + '"></div>';
                    }
                    else {
                        text += '<div class="inline-block w-3 h-3 rounded bg-orange-light' + ((i==1) ? '' : ' ml-1') + '"></div>';
                    }
                }
                return text;
            }
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });


    var prevSlideButtons = document.getElementsByClassName('swiper-slide-prev');
    for (var i = 0; i < prevSlideButtons.length; i++) {
        prevSlideButtons.item(i).addEventListener("click", function() { swiper.slidePrev(); });
        prevSlideButtons.item(i).addEventListener("touchstart", function() { swiper.slidePrev(); });
    }

    var nextSlideButtons = document.getElementsByClassName('swiper-slide-next');
    for (var i = 0; i < nextSlideButtons.length; i++) {
        nextSlideButtons.item(i).addEventListener("click", function() { swiper.slideNext(); });
        nextSlideButtons.item(i).addEventListener("touchstart", function() { swiper.slideNext(); });
    }

And the HTML:

<!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">

                    {{ cases }}
                    <div class="swiper-slide">
                        <div class="flex flex-col lg:flex-row">
                            <div class="flex-1">
                                <div class="mt-8 px-40 py-40 bg-grey rounded-bl-4xl text-white">
                                    Foto
                                </div>
                            </div>
                            <div class="flex-grow text-left ml-0 lg:ml-8">
                                <div class="mt-8">
                                    <div class="bg-grey px-8 py-4 inline-block text-white">Logo</div>
                                    <div class="bg-grey px-8 py-4 inline-block ml-4 text-white">Logo</div>
                                </div>
                                <blockquote class="font-semibold text-2xl mt-4">“{{ quote }}”</blockquote>
                                <div class="text-grey mt-8">{{ quote_author }}</div>
                                <a href="" class="text-orange inline-block mt-8 font-semibold">
                                    Lees hun verhaal
                                    <img class="inline-block" src="/assets/icons/arrow-right.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                    {{ /cases }}

                </div>
            </div>

[nicktc]

Ok, found the problem. The <div class="swiper-container"> had to be <div class="swiper">. Perhaps made a mistake while upgrading from 6 to 7.