快捷導(dǎo)航

vue+swiper實(shí)現(xiàn)時(shí)間軸效果

更新時(shí)間：2021年08月12日 15:27:57 作者：側(cè)耳傾聽...

這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+swiper實(shí)現(xiàn)時(shí)間軸效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

首先引入，有淘寶鏡像的用 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, //顯示三個(gè)輪播
      centeredSlides: true, //設(shè)定為true時(shí)，active slide會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。
      centerInsufficientSlides: true, //開啟這個(gè)參數(shù)，當(dāng)slides的總數(shù)小于slidesPerView時(shí)，slides居中。不適用于loop模式和slidesPerColumn
      centeredSlidesBounds: true, //使得第一個(gè)和最后一個(gè)Slide 始終貼合邊緣。
      // loop: true, //循環(huán)
      // autoplay: true, //自動(dòng)播放
      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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: