这个效果的实现参考了swiper官网上的事例,事例如下:
https://www.swiper.com.cn/demo/progress-effect.html
https://www.swiper.com.cn/demo/140-centered-auto.html
使用了swiper的切换效果Effects中的coverflowEffect属性配置
<template>
<div class="carousel-card-page">
<swiper :options="options" class="swiper-container" ref="swiper">
<swiperSlide v-for="(info, index) in cardInfos" :key="index">
<vInfoCard :info="info" class="swiper-item"></vInfoCard> <!--笔者自定义的组件,下面贴出了简单的组件定义代码-->
</swiperSlide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { imgUrl } from '../../config/env'
import vInfoCard from '../vInfoCard/vInfoCard'
export default {
name: 'carouselCard',
components: { swiper, swiperSlide, vInfoCard },
data () {
return {
options: {
slides