swiper bind

document.querySelectorAll(".slider").forEach((n, i) => {
    window[`slider${i+1}`] = new Swiper(n, {
        freeMode:true,
        centeredSlides:true,
        direction:"vertical",
        mousewheel:true,
        slidesPerView:1.75,
        slidesOffsetBefore: -125,
    })
})

bindSwipers(slider1, slider2, slider3, slider4);

<div class="main-wrapper">
        <div class="swiper slider slider1">
            <div class="swiper-wrapper slider__wrapper">
                <div class="swiper-slide slider__item">
                    <div class="slider__img" style="background-image: url(img/4.jpg);"></div>
                </div>
                <div class="swiper-slide slider__item">
                    <div class="slider__img" style="background-image: url(img/5.jpg);"></div>
                </div>
                <div class="swiper-slide slider__item">
                    <div class="slider__img" style="background-image: url(img/6.jpg);"></div>
                </div>
                <div class="swiper-slide slider__item">
                    <div class="slider__img" style="background-image: url(img/7.jpg);"></div>
                </div>
            </div>
        </div>
       ---
    </div>
    
<script src="js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="js/bindSwipers.js"></script>

:root{
    --index: calc(1vw + 1vh);
    --transition: 1.2s cubic-bezier(0.2, 0.6, 0, 1) ;
}
html, body {height: 100%; overflow: hidden;}
.main-wrapper{height: 100%; display: flex; gap:var(--index) * 2 ;}
.slider{transform: rotate(12.5deg); overflow: visible;}
.slider:nth-child(odd){transform: rotate(192.5deg);}
.slider:nth-child(odd) .slider__img{transform: rotate(-180deg);}
.slider .slider__wrapper{transition: var(--transition) !important; will-change:transform;}
.slider__item{width: 21vw; margin-bottom: calc(var(--index) * 2);}
.slider__img{width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;}