Swiper、vue-awesome-swiper 插件使用

Swiper在PC端和移动端都适用

官方网站：Swiper中文网首页-官方

vue2 配合 swiper5或6版本

vue3 可以使用 swiper8最新版本

一、Swiper插件（Vue、React、Angular框架都可以使用）

1、使用方法

Swiper使用方法（一个简单轮播的实现）-官方

2、版本简介

swiper简介和swiper各版本兼容性-官方

3、版本下载（以swiper5为例：点击下载swiper-5.4.5.zip）

下载Swiper包-官方

4、具体实现 

4-1、下载至本地之后，根据 swiper5 版本需要，保留swiper.min.js和swiper.min.css文件

4-2、根据下方链接进行配置

Swiper使用方法-官方

  
  
  
  
  
  



  

    

      
Slide 1
      
Slide 2
      
Slide 3
    
    
    


    
    

    


    
    

  
  

要注意：Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'

操作完以上步骤，此时swiper轮播已经是能正常切换了。其他功能可以结合API文档完成。 

Swiper参数选项API文档-官方

5、个人优化

在上面轮播基础上添加了鼠标移入，轮播切换停止；鼠标移出，轮播切换继续效果。

鼠标移入移出效果-官方

    
    
    
    
    
    
    
    



    

        

            
Slide 1
            
Slide 2
            
Slide 3
        
        
        


        
        

        

    

二、vue-awesome-swiper插件（仅供Vue框架使用）

vue-awesome-swiper插件在swiper插件基础上进行的封装，封装成了vue组件。

所以在使用vue-awesome-swiper插件前，要先安装swiper。

vue3 + vue-awesome-swiper 文档

vue2 + vue-awesome-swiper 文档

 1、Vue2项目使用swiper、vue-awesome-swiper插件，具体实现：

1-1、安装swiper、vue-awesome-swiper

npm i swiper@5 vue-awesome-swiper@4

安装完成后在package.json文件中，如下图：

1-2、代码配置 main.js入口文件中 

import "swiper/css/swiper.min.css"
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
Vue.component('Swiper', Swiper);
Vue.component('SwiperSlide', SwiperSlide);
// Swiper 代表最外侧容器
// SwiperSlide 代表每一张轮播图

 1-3、代码配置 pages/test/index.vue

操作完以上步骤，此时vue-awesome-swiper轮播已经是能正常切换了。其他功能可以结合swiper的API文档完成（是的，没有看错，swiper的api文档）。

vue-awesome-swiper API文档