vue+swiper实现时间轴效果
作者：侧耳倾听...
这篇文章主要为大家详细介绍了vue+swiper实现时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下
效果：
首先引入，有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save
<template>
<div class="hello" style="height:100%;width:100%;position:relative;">
<div class="swiperlist">
<div class="swipers">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(activity, index) in superurl" :key="index">
<div style="padding-left: 4px;">
<div class="step-line"></div>
<div class="step-content">
<div class="step-num"></div>
<div class="sub_title">{{activity.img}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttom" v-if="superurl.length>2">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import "../../../../../node_modules/swiper/css/swiper.min.css";
import baseMap from "./baseMap.vue";
import "../../../../../static/mapbox/css/map.css";
export default {
name: "Map",
components: {
baseMap
},
data() {
return {
superurl: [
{
url: "",
img: "2019-01"
},
{
url: "",
img: "2019-02"
},
{
url: "",
img: "2019-03"
},
{
url: "",
img: "2019-04"
},
{
url: "",
img: "2019-05"
},
{
url: "",
img: "2019-06"
}
]
};
},
watch: {},
methods: {},
mounted() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView: 3, //显示三个轮播
centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。
centerInsufficientSlides: true, //开启这个参数，当slides的总数小于slidesPerView时，slides居中。不适用于loop模式和slidesPerColumn
centeredSlidesBounds: true, //使得第一个和最后一个Slide 始终贴合边缘。
// loop: true, //循环
// autoplay: true, //自动播放
direction: "vertical", //竖屏
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
}
};
</script>
<style scoped>
.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;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。