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项目中的使用方法 ” 的全部内容。