vue+swiper实现时间轴效果 vue+swiper实现时间轴效果

本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下
效果：

文章图片

首先引入，有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save

.swiperlist {width: 90px; height: 256px; position: absolute; background: #f5f5f5; left: 5px; top: 205px; overflow: hidden; padding: 32px 0; border-radius: 6px; }.swipers {width: 100%; height: 250px; overflow: hidden; }.swiper-container {height: 250px !important; }.swiper-slide-active {color: #3a70ca; }.swiper-button-prev,.swiper-container-rtl .swiper-button-next {left: 28px; right: auto; top: 15px; transform: rotate(90deg); color: #3a70ca; }.swiper-button-next,.swiper-container-rtl .swiper-button-prev {top: 94%; transform: rotate(90deg); left: 28px; color: #3a70ca; }.swiper-button-next:after,.swiper-button-prev:after {font-size: 25px; }.sub_title {margin-left: 15px; margin-top: -19px; }.step-num {display: inline-block; height: 2px; width: 2px; color: #fff; background-color: #3a70ca; line-height: 30px; border-radius: 50%; text-align: center; border: 2px solid #3a70ca; margin-top: 36px; }.step-num:after {content: ""; width: 2px; height: 84px; border-left: 1.5px dotted #3a70ca; /* background-color: #3a70ca; */position: absolute; top: 0px; margin-left: -1px; }

【vue+swiper实现时间轴效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。