I am trying to achieve this layout but when I try at first it seems ok but when you swipe, slide goes off. I want the active slide width to be 50% and others 25% at any window size except mobile.

My scss looks like this. (I tried to change the active slide's width to 50% and others to 25%)

.newsSlider {
.swiper-slide {
    overflow: hidden;
    transition: 0.3s ease-in-out;
    width: 25%;

    .news-item {
        transition: 0.3s ease-in-out;
        width: 400px;
        height: 500px;
        overflow: hidden;
        position: relative;

        .news-floater {
            position: absolute;
            left: 0;
            bottom: 3rem;
            color: #fff;
            width: 100%;
            padding: 0 1rem 0 2rem;
            pointer-events: none;
            z-index: 2;

            .title {
                background-color: #cb2828;
                font-weight: bold;
                font-size: 1.3rem;
                text-transform: uppercase;
            }

            .news-title {
                font-size: 1.5rem;
                font-weight: bold;
            }

            .news-text {
                position: relative;
            }
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.2) translateX(0);
            transition: 5s ease-in-out;
        }
    }

    &.swiper-slide-active {
        width: 50%;

        .news-item {
            width: 100%;
            transition: 0.3s ease-in-out;

            .news-floater {
                pointer-events: all;
            }

            img {
                transform: scale(1.3) translateX(20px);
            }
        }
    }
}

}

Here is the demo: https://codepen.io/Xteripus/pen/yLpbJmQ