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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)