1.安裝swiper

npm install swiper

2.在組件中引入swiper

import 'swiper/dist/css/swiper.min.css'

import Swiper from "swiper"

3.頁(yè)面的代碼

<template><div><mt-header fixed title="處方示例"><a slot="left" @click="$router.go(-1)"><mt-button icon="back"></mt-button></a></mt-header><div class="examples"><div class="bannerTxt">{{bannerTxt}}</div><div class="bannerBox"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in banner" :key="index"><img :src="item.picture_path" alt=""></div></div></div></div><div class="bannerIndex"><span>{{bannerIndex}}</span>/4</div><div class="tips"><img src="./imgs/icon_tz.png" alt="" class="tipsImg"><p>請(qǐng)盡量保證上傳的處方文字清晰可見(jiàn)，并保證紅框內(nèi)的信息完整不缺失</p></div></div></div> </template><script> import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; export default {data() {return {bannerIndex: 0,bannerTxt: '手寫的處方',banner: [{picture_txt: '手寫的處方',picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png',},{picture_txt: '機(jī)打的處方',picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png',},{picture_txt: '機(jī)打的處方',picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png',},{picture_txt: '機(jī)打的處方',picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'}]};},mounted() {let that = this;/* eslint-disable */let mySwiper = new Swiper('.swiper-container', {direction: 'horizontal', //滑動(dòng)方向，可設(shè)置水平(horizontal)或垂直(vertical)。loop: true, // 設(shè)置為true 則開啟loop模式autoplay: 3000, // 自動(dòng)切換時(shí)間slidesPerView: 'auto', // 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。類型：number or autocenteredSlides: true, // 設(shè)定為true時(shí)，active slide會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。spaceBetween: 10, // 在slide之間設(shè)置距離（單位px）。loopAdditionaSlider: 0, // loop模式下會(huì)在slides前后復(fù)制若干個(gè)slide,，前后復(fù)制的個(gè)數(shù)不會(huì)大于原總個(gè)數(shù)。 on: {slideChangeTransitionEnd: function(){if(this.activeIndex === 8 || this.activeIndex === 4 ) {that.bannerIndex = 1;that.bannerTxt = '手寫的處方';} else {that.bannerIndex = this.activeIndex-3;that.bannerTxt = '機(jī)打的處方';}},},});}, }; </script><style lang="less" scoped> .examples{position: absolute;top: 44px;left: 0px;right: 0px;bottom: 0px;overflow: auto;background-color: #f5f0f0;font-size: 14px;.tips{position: absolute;bottom: 0px;width: 100%;height: 46px;background-color: #b5654d;text-align: center;img{width: 12px;height: 14px;position: absolute;top: 7.5px;left: 12vw;color: #fff;}p{width: 240px;text-align: left;color: #fff;font-size: 12px;position: absolute;left: 18vw;top: 7px;line-height: 16px;}} } .bannerTxt{height: 60px;line-height: 60px;text-align: center;color: #666666;font-size: 15px; } .bannerIndex{line-height: 40px;text-align: center;color: #666666;font-size: 15px;text-align: center;span{color: #b5654d;} } .bannerBox{position: relative;height: 380px; } .swiper-container {width: 100%;height: 100%; } .swiper-container .swiper-wrapper .swiper-slide {width: 80% !important;overflow: hidden;display: flex;align-items: center; } .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;height: 380px;border-radius: 5px; } .swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{height: 340px !important;margin-top: 20px; } .swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{width: 100%;height: 100%; } </style>

4.效果圖

轉(zhuǎn)載于:https://www.cnblogs.com/yangzhenhong/p/11023338.html

總結(jié)

以上是生活随笔為你收集整理的vue卡片化轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。