vue手动实现一个类似于swiper官网的cardsEffect代码
时间: 2024-04-23 18:26:52 浏览: 3
好的,这里提供一个简单的手动实现类似于 Swiper 官网 Cards Effect 的代码示例,你可以根据自己的需求进行修改:
```vue
<template>
<div class="cards-container">
<div
class="card"
v-for="(card, index) in cards"
:key="index"
:style="{ zIndex: 100 - index, transform: `translateX(${index * 20}px)` }"
>
<img :src="card.imgUrl" alt="">
<h3>{{ card.title }}</h3>
<p>{{ card.content }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cards: [
{
imgUrl: "https://picsum.photos/id/237/200/300",
title: "Card 1",
content: "This is card 1 content."
},
{
imgUrl: "https://picsum.photos/id/238/200/300",
title: "Card 2",
content: "This is card 2 content."
},
{
imgUrl: "https://picsum.photos/id/239/200/300",
title: "Card 3",
content: "This is card 3 content."
},
{
imgUrl: "https://picsum.photos/id/240/200/300",
title: "Card 4",
content: "This is card 4 content."
},
{
imgUrl: "https://picsum.photos/id/241/200/300",
title: "Card 5",
content: "This is card 5 content."
}
]
};
}
};
</script>
<style>
.cards-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
position: absolute;
width: 200px;
height: 300px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.5s ease-in-out;
}
.card img {
width: 100%;
height: 60%;
object-fit: cover;
border-radius: 10px 10px 0 0;
}
.card h3 {
margin-top: 10px;
font-size: 20px;
text-align: center;
}
.card p {
margin-top: 10px;
font-size: 16px;
text-align: center;
}
</style>
```
在这个示例代码中,我们使用了一个包含 5 个卡片的数组来进行展示,通过给每个卡片设置不同的 `z-index` 和 `transform` 属性来实现卡片的叠加效果,同时使用 `transition` 属性来添加动画效果。你可以根据自己的需求进行修改和扩展。