如何解决创建通知卡垂直旋转木马并将第一张卡片设置为滑动的最佳方法是什么?
我正在尝试制作自动通知卡片,卡片应该从带有动画的屏幕右侧滑入第二张卡片将以相同的方式滑动并将前一张卡片向下推,就像这个网站{{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>
任何人都有更好的方法来实现我的目标,谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。