基于vue的时间轴轮播图插件 timeline-carousel

最新推荐文章于 2024-07-24 10:36:08 发布

陈佳兵001

最新推荐文章于 2024-07-24 10:36:08 发布

阅读量3.6k

点赞数 7

分类专栏： vue 文章标签： vue es6 vue.js

本文链接：https://blog.csdn.net/qq_35603474/article/details/109045262

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个基于vue的时间轴轮播图插件。

DEMO演示

项目演示

使用方式

安装

npm i timeline-carousel --save

在main.js中使用

import timelineCarousel from 'timeline-carousel'
Vue.use(timelineCarousel)

组件中使用

<template>
  <timeline-carousel 
    :timelineList="[{
      id: 1,
      text: '2020-09-28'
    }]"
    :carouselList="[{
      id: 1,
      img: require('./images/1.jpg'),
      title: '陶渊明',
      info: '盛年不重来，一日难再晨。及时宜自勉，岁月不待人。'
    }]"
  />
</template>

属性

名称	默认值	类型	简介	注意
themeColor	#bd1622	String	主题色
timelineList	[]	Array	时间轴列表	数量需与轮播图列表一致
carouselList	[]	Array	轮播图列表	数量需与时间轴列表一致
carouseIsShow	true	Boolean	是否显示轮播图
autoPlay	true	Boolean	是否自动播放
loop	true	Boolean	是否循环播放
timelineNum	6	Number	时间轴显示数量
timelineWidth	150	Number	时间轴item宽度	默认150宽度，如果更改宽度，组件中展示几个元素需要与timelineNum属性展示数量保持一致
enterActiveClass	animate__animated animate__fadeInLeft	String	轮播图切换动画	animate.css库中任意动画都可以使用
mouseEvent	false	Boolean	鼠标移入轮播图禁止滚动