swiper 多次new 的时候； 出现样式混乱的情况

网站： https://www.swiper.com.cn/demo/index.html

1 下载 cnpm i swiper@5.3.7 --S （注意这种是对版本有所要求的）

2 引入
页面引入 – import Swiper from ‘swiper’
main.js 引入 – import ‘swiper/js/swiper.min’
main.js 引入 – import ‘swiper/css/swiper.min.css’

3 使用的是 异性 slide 出现的bug ， 切换数据多次new 的时候，出现bug
解决：
重要的就是 这两个属性的处理：

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

gerSwiper() {
this.swiper = new Swiper('.swiper-container', {
	slidesPerView: 1.7,
	spaceBetween: 30,
	initialSlide :0,//默认第三页
	centeredSlides: true,
	loop: false,
	observer:true,//修改swiper自己或子元素时，自动初始化swiper
	observeParents:true,//修改swiper的父元素时，自动初始化swiper
	});
	console.log(this.swiper,'我更新了吗')
},


基础使用
注意： on 事件的时候，的 this 指向（外围记得做）

1、目的：分页的 点 放slider 外面，
    解决：1、外层要高 ； 2、子数据 比较低 就行 ；3、 重新定位bottom
    
2、目的：自定义 左右分页，
     解决：1、原始的隐藏，点击的时候操作 原始的 

3、出现 子元素 空白页 解决参数： centeredSlides: true,（或false）

```javascript

<div class="information-videos">
	<div class="swiper-container">
	<div class="swiper-wrapper">
	<div v-for ="(item,index ) in swiperList1" 
	:key ="index" class="swiper-slide">
	<img src="@/assets/images/tdpmgl/bg.jpg" alt="">
	</div>
	</div>
	// 分页远点
	<div class="swiper-pagination"></div>
	// 隐藏的按钮
	<div v-show="false" ref="swiperButtonPrev1" 
	class="swiper-button-prev"></div>
	<div v-show="false" ref="swiperButtonNext1" 
	class="swiper-button-next"></div>
</div>
<!-- 自定义按钮 -->
<img class="button-left" @click="goLeft(1)" :src="leftImg" alt="">
<img class="button-right" @click="goRight(1)" :src="rightImg" alt="">
</div>

new Swiper('.information-videos .swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChangeTransitionStart: function(){
            that.activeIndex1 = this.activeIndex // 处理没有数据的时候的判断值
          },
        },

        slidesPerView: 1,
        // spaceBetween: 10,
        // initialSlide :0,//默认第三页
        centeredSlides: true,
        loop: false,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        });