当前位置:   article > 正文

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

timeline-carousel

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

DEMO演示

使用方式

  • 安装
npm i timeline-carousel --save
  • 1
  • 在main.js中使用
import timelineCarousel from 'timeline-carousel'
Vue.use(timelineCarousel)
  • 1
  • 2
  • 组件中使用
<template>
  <timeline-carousel 
    :timelineList="[{
      id: 1,
      text: '2020-09-28'
    }]"
    :carouselList="[{
      id: 1,
      img: require('./images/1.jpg'),
      title: '陶渊明',
      info: '盛年不重来,一日难再晨。及时宜自勉,岁月不待人。'
    }]"
  />
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

属性

名称默认值类型简介注意
themeColor#bd1622String主题色
timelineList[]Array时间轴列表数量需与轮播图列表一致
carouselList[]Array轮播图列表数量需与时间轴列表一致
carouseIsShowtrueBoolean是否显示轮播图
autoPlaytrueBoolean是否自动播放
looptrueBoolean是否循环播放
timelineNum6Number时间轴显示数量
timelineWidth150Number时间轴item宽度默认150宽度,如果更改宽度,组件中展示几个元素需要与timelineNum属性展示数量保持一致
enterActiveClassanimate__animated animate__fadeInLeftString轮播图切换动画animate.css库中任意动画都可以使用
mouseEventfalseBoolean鼠标移入轮播图禁止滚动

事件

名称返回值说明
getCurrentItemgetCurrentItem(index, timelineItem, carouselItem){}(索引值, 时间轴Item, 轮播图Item)

作者信息

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/130215
推荐阅读
相关标签
  

闽ICP备14008679号