Swiper Slider with 2 columns of slides

Question

Need help with Swiper Slider or any other slider suggestions - need to make vertical slider with scrollbar aside - 2 slides view or 1 slide per column. Tried different combinations of swiper documentation and css formatting but cannot get the final result.

Html code --

           <div class="alt-slider swiper">
          <div class="alt-slider__wrapper swiper-wrapper">
            <div class="alt-slider__items swiper-slide">
              <div class="alt-slider__item">
                <div class="lattest-blog__image">
                  <img class="lattest-blog_img" src="./Assets/img/lattest-blog01.jpg" alt="">
                </div>
                <div class="lattest-blog__info">
                  <h6 class="lattest-blog__title">Unleash Your Creativity</h6>
                  <p class="lattest-blog__text">Nine for Mortal Men, doomed to die, One for</p>
                </div>
              </div>
            </div>
            <div class="alt-slider__items swiper-slide">
              <div class="alt-slider__item">
                <div class="lattest-blog__image">
                  <img class="lattest-blog_img" src="./Assets/img/lattest-blog02.jpg" alt="">
                </div>
                <div class="lattest-blog__info">
                  <h6 class="lattest-blog__title">Unleash Your Creativity</h6>
                  <p class="lattest-blog__text">Nine for Mortal Men, doomed to die, One for</p>
                  <a class="button button--blog" href="#">Read more</a>
                </div>
              </div>
            </div>
            <div class="alt-slider__items swiper-slide">
              <div class="alt-slider__item">
                <div class="lattest-blog__image">
                  <img class="lattest-blog_img" src="./Assets/img/lattest-blog01.jpg" alt="">
                </div>
                <div class="lattest-blog__info">
                  <h6 class="lattest-blog__title">Unleash Your Creativity</h6>
                  <p class="lattest-blog__text">Nine for Mortal Men, doomed to die, One for</p>
                </div>
              </div>
            </div>
            <div class="alt-slider__items swiper-slide">
              <div class="alt-slider__item">
                <div class="lattest-blog__image">
                  <img class="lattest-blog_img" src="./Assets/img/lattest-blog02.jpg" alt="">
                </div>
                <div class="lattest-blog__info">
                  <h6 class="lattest-blog__title">Unleash Your Creativity</h6>
                  <p class="lattest-blog__text">Nine for Mortal Men, doomed to die, One for</p>
                  <a class="button button--blog" href="#">Read more</a>
                </div>
              </div>
            </div>

and css for slider---

.alt-slider__item {
position: relative;
margin-right: 45px;
margin-left: 45px;
margin-bottom: 60px;
max-height: 496px;}

.alt-slider__items {
max-height: 467px;
height: 100%;
max-height: 600px;
display: block;
width: 467px;}

two slides are position correclty but other goes right, not down as supposed to Image

and code in js---

let myImageSliderAlt = new Swiper('.alt-slider', {
direction: 'vertical',
slidesPerView: 1,
slidesPerGroup: 2,
fill: 'column',
slidesPerColumn: 3,
spaceBetwenn: 50,

/* centeredSlides:true, */
scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
},

})