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

简单Demo效果：

引入：

<script src="js/jquery.min.js"></script> <!-- >=1.11.2 -->
<script src="js/timeline.min.js"></script><link rel="stylesheet" href="css/timeline.css">

Html:

<template><div class="timeline-container timeline-theme-1"><div class="timeline js-timeline"><div data-time="2017" class="theme-2" >your content or markup</div><div data-time="2016" class="theme-6">your content or markup</div><div data-time="2015" class="theme-4">your content or markup</div><div data-time="2014" class="theme-5">your content or markup</div><div data-time="2013" class="theme-3">your content or markup</div></div></div>
</template><style>
.timeline-theme-1 {width: 600px;margin: 70px auto auto;
}.timeline-theme-1 .timeline-list {width: 600px !important;height: 250px;
}.js-timeline .box-item {float: left;width: 600px;height: 250px;color: #fff;text-align: center; }.theme-1 {background: #4A2AB2; }.theme-2 {background: #7dffc3; }.theme-3 {background: #23A5E9; }.theme-4 {background: #93C763; }.theme-5 {background: #949923; }.theme-6 {background: #990055; }
</style>

JS：

$('.js-timeline').Timeline({autoplay: true,mode: 'vertical',itemClass: 'box-item'
})

github地址：https://github.com/ilkeryilmaz/timelinejs

附：基于jquery 横向/纵向时间轴插件推荐

其他效果（可能会有闪屏Bug）

一个基于vue的时间轴轮播图插件相关推荐

一个功能较全的轮播图插件（含详细介绍）
今天给大家分享一个功能较全的轮播图插件,废话不多说,直接上插件 ;(function($){"use strict";$.fn.extend({banner:function(op ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
vue纵向轮播_vue滑动轮播图插件vueswiper
插件描述:vue滑动轮播图插件,支持移动端拖拽滑动 vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端版本 v2.1.2 支持v ...
【python教程入门学习】用pyecharts绘制带动画效果的“时间轮播图
今天我们要分享的是一个数据可视化的案例. 在讲述本文之前,为了满足大家的好奇心,我们先来看看最终做出来的效果呈现. 不管学习什么技术,官网是最好的老师.对于pyecharts绘图库,知道了他的绘图原理 ...
好玩！PyEcharts 绘制时间轮播图
作者 | 黄伟呢来源 | 数据分析与统计学之美这里我需要事先说明一点:不管学习什么,官网是最好的老师.对于pyecharts绘图库,知道了它的绘图原理后,不管绘制任何图形难度并不是很大,唯一难住我 ...
Vue 过渡实现轮播图
Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过 ...
技术解析：如何用pyecharts绘制时间轮播图
在前天的文章『用python制作动态图表看全球疫情变化趋势』中,由于篇幅原因,在数据处理与数据可视化相关内容上我们只是简单带过,那么我将以python小小白的角度去还原如何处理数据与数据可视化.本文为 ...
使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

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

一个基于vue的时间轴轮播图插件相关推荐

最新文章

热门文章