创建通知卡垂直旋转木马并将第一张卡片设置为滑动的最佳方法是什么？

如何解决创建通知卡垂直旋转木马并将第一张卡片设置为滑动的最佳方法是什么？

我正在尝试制作自动通知卡片，卡片应该从带有动画的屏幕右侧滑入第二张卡片将以相同的方式滑动并将前一张卡片向下推，就像这个网站{{3} }

我曾尝试使用 swiperjs 创建它，但我无法动画卡片从左侧滑入，并且轮播的自动播放与网站中的不同 https://muzzleapp.com/ 这是我的代码

var swiper = new Swiper(".swiper-container",{
   
  direction: "vertical",grabCursor: true,centeredSlides: true,slidesPerView: "auto",reverseDirection: true,loop: true,slidesPerView: 6,spaceBetween: 10,pagination: {
    el: ".swiper-pagination",clickable: true,},coverflowEffect: {
    rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows: true,autoplay: {
    delay: 1500,});

这是html

 <div class="col-lg-5">
                    <img class="main-img" src="./Assest/Group 14.png" alt="">
                </div>
                <div class="col-lg-3">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="d-flex flex-row">
                                    <img src="./Assest/avatar1.png" class="avatar" alt="">
                                    <div class="d-flex flex-column mt-3">
                                        <h2 class="name">Derek Chin</h2>
                                        <p class="card-info">Aiseh new PS5 ah,swee ah bro. But now pokai how?</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="d-flex flex-row">
                                    <img src="./Assest/avatar1.png" class="avatar" alt="">
                                    <div class="d-flex flex-column">
                                        <h2 class="name">Derek Chin</h2>
                                        <p class="card-info" class="card-info">Aiseh new PS5 ah,swee ah bro. But now
                                            pokai how?</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="d-flex flex-row">
                                    <img src="./Assest/avatar1.png" class="avatar" alt="">
                                    <div class="d-flex flex-column">
                                        <h2 class="name">Derek Chin</h2>
                                        <p class="card-info">Aiseh new PS5 ah,swee ah bro. But now pokai how?</p>
                                    </div>
                                </div>
                            </div>

任何人都有更好的方法来实现我的目标，谢谢