VUE—— 2. Swiper商城轮播图实现

预备：先打开Swiper官方文档：
https://3.swiper.com.cn/api/basic/2014/1215/19.html

去第三方库官网下载Swiper.3的压缩包，这个版本最稳定，在Swiper.3的压缩包中将Swiper.js和Swiper.css 这2个文件放入项目中

建立一个文件夹，libs文件夹，专门存放要使用的第三方库如这里的Swiper第三方库，将第三方库的JS文件放到libs文件夹中，第三方库的CSS文件可以放在公共样式文件夹中，或者也放在libs中也行

使用Swiper商城轮播图
第一步：在使用轮播图的组件中导入第三方库的JS文件
import Swiper from “…/…/…/assets/js/libs/swiper.js”

<script>
import Swiper from "../../../assets/js/libs/swiper"
export default {
name:"swiper"
data(){
		return{count:0}
		}
}
</script>

第二步：在使用轮播图的组件中导入第三方库的CSS文件

@import “…/…/…/assets/css/common/swiper.css”;

< style scoped>
	@import "../../../assets/css/common/swiper.css";
< /style >

早期写轮播图放一张图片占位置

第三步控制台安装适配：
npm install --save-dev @babel/plugin-transform-modules-commonjs
这里的dev应人而异自己在package.json中查看，有的人是serve,也有的是dev,看自己设置的

第四步在babel.config.js中配置选项

 plugins:[
      [
          '@babel/plugin-transform-modules-commonjs',
          {
            allowTopLevelThis:true
          }
      ]
  ]

如图所示

第五步：使用第三方库时第三方轮播图的样式即class不要修改，切记千万不要修改，直接放入以下代码到轮播图替代区

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>

在 mounted钩子函数中获取轮播图Dom，并给轮播图设置配置选项

 mounted(){
      new Swiper('.swiper-container', {
              	autoplay: 3000,//可选选项，自动滑动
                          })
     },

最好使用ref来获取Dom,如下

 mounted(){
      new Swiper(this.$refs['swiper-container'], {
              	autoplay: 3000,//可选选项，自动滑动
                          })
     },

第六步：完善动态轮播图效果
1. 添加轮播图分页器，
2. 分页器点击切换效果，
3. 点击后能自动继续滑动效果