Swiper4.5在vue项目中的使用方法

一、 效果图 · 渐变式 · gif 动画演示：

二、首先，npm 安装 swiper

用swiper，所以要先在框架内npm install --save swiper安装它。

安装完成之后，你会在项目路径：/node_modules/swiper/dist /css和js文件夹下，找到对应的.js 和.css文件。

三、其次，调用代码 · 本例如下：

<template>
<div id="htmlWrap" style="background:none;"><!--header--><div class="bg545C64" style="background:none;box-shadow:0 0 3px #e5e5e5;"><HrIndexMenuVue></HrIndexMenuVue></div><!-- 轮播图 --><div class="bannerWrap" style="width:100%;height:842px;"><!-- https://www.swiper.com.cn/demo/220-effect-fade.html --><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" style="background-image:url(../../../static/images/index/bg_banner1.png)"></div><div class="swiper-slide" style="background-image:url(../../../static/images/index/bg_banner2.png)"></div></div><!-- Add Pagination --><div class="swiper-pagination swiper-pagination-white" id="swiper-spit"></div><!-- Add Arrows --><div class="swiper-button-next swiper-button-white"></div><div class="swiper-button-prev swiper-button-white"></div></div></div><div style="clear:both;"></div><!-- Footer 版权信息 --><NewFooterVue></NewFooterVue>
</div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'// 轮播图 【注意1】
import Swiper from 'swiper'; 
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'export default {name: 'indexHr',data() {return {};},mounted(){// 【注意2:】// 轮播图 · 初始化设定var swiper = new Swiper('.swiper-container', {spaceBetween: 30,effect: 'fade',autoplay: {delay: 3000,disableOnInteraction: false, // 取消鼠标操作后的轮播暂停【无操作轮播继续】【参考链接1】stopOnLastSlide: false, // 在最后一页停止},pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});},methods: {  }}
</script><!--添加“范围”属性：“scoped”来限制CSS到这个组件 -->
<style scoped>
/* 轮播图 */
.swiper-container {width: 100%;height: 100%;}
.swiper-slide {background-position: center;background-size: cover;}
/* 焦点·参考swiper.min.css源文件修改 */</style>

四、注意

1. 上述案例代码注释中的【注意1】、【注意2】
2. 焦点样式，（因为优先级问题），本例直接修改了swiper.css对应的源码
3. 如果不喜欢左右切换按钮，可以将对应的html标签删除或注释。【】

五、参考链接

1. 轮播源码： Swiper自动切换 （向下滚动网页查看）+ Swiper官方demo：（自动切换）
2. 轮播源码： Swiper 渐变切换(220) （向下滚动网页查看）+ Swiper官方demo：（渐变切换(220)）

以上就是关于“ Swiper4.5在vue项目中的使用方法 ” 的全部内容。