スライダーを縦並びにし、上下の隣のスライドをチラ見せさせたい

実現したいこと

タイトル通りですが、
スライダーを縦並びにし、上下の隣のスライドをチラ見せさせたいです。
下記のイメージ画像の高さ＝ブラウザの高さとしたいです。

▼イメージ

発生している問題

「swiper.js」を使用して、ある程度形にはなったのですが、
３つのスライドの位置が上下中央にきません。少しズレてしまいます。

▼イメージ（矢印の位置は無視してください。）

該当のソースコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

    <style>
        body {margin: 0;}
        .swiper-wrapper { align-items: stretch!important; }
        .swiper-slide { width: auto; }
        .sample-slider {
            max-width: 550px;
            height: 100vh;
            min-height: 650px;
            box-sizing: border-box;
        }
        .sample-slider img{
            width: 100%;
            height: auto;
            max-width: 550px;
        }
        .sample-slider [class^=swiper-button]{
            transform:rotate(90deg);
            top: initial;
            left: initial;
            right: 10px;
            margin: 0;
        }
        .sample-slider .swiper-button-prev{
            top:0;
        }
        .sample-slider .swiper-button-next{
            bottom:0;
        }
        .sample-slider .swiper-pagination{
            right:20px;
        }
    </style>
</head>

<body>
    <div class="swiper sample-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/550x350.png"></div>
            <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/550x350.png"></div>
            <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/550x350.png"></div>
            <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/550x350.png"></div>
            <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/550x350.png"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script>
        const swiper = new Swiper('.sample-slider', {
            loop: true,                         //ループ
            direction: "vertical",              //スライドの向きを縦方向に
            autoplay: {                         //自動再生
                delay: 2000,  
            },                   
            pagination: {                       //ページネーション（ドット）
                el: '.swiper-pagination',
            },
            navigation: {                       //ナビゲーション（矢印）
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },

            slidesPerView: 2,                   //追記
            centeredSlides : true,              //追記
            spaceBetween: 200,               //追記
        })
    </script>
</body>

</html>