swiper轮播图(旋转木马,异形swiper)

项目：铜川邮储Kmi商城

参考链接：添加链接描述-----查看源代码看

使用swiper轮播图组件库，查看vue中使用的文档和API文档(swiper6优缺点，滑动会跳动一下)
在.vue文件中具体如何使用参考文档

**loop:true循环时的一些坑：
1、前后复制的slide中图片是src是空的// 图片src是动态获取的，在src数据还没从后台获取到，swiper就完成了复制操作，此时src都是空的
2、前后复制的slide点击跳转事件不生效// swiper只前后复制dom，并不会复制事件
解决：
1、让swiper组件在获取到动态数据之后再渲染生效。
	swiper的有关html中加上v-if=‘swiperShow==false’先不渲染，在获取到动态数据之后进行
this.$nextTick(()=>{ //里面进行有关该组件的操作 this.swiperShow=true })
2、不直接在标签本身增加事件，在对swiperoptions配置中的On事件中使用js对Dom进行操作。
         click: function (swiper, event) {
         	//此时的this指向swiper实例
         	//swiper为点击的该div
         	//swiper.target Img本身dom标签
          }

下载：npm install vue-awesome-swiper@3.1.3 --save

引入：
	main.js：
		import VueAwesomeSwiper from 'vue-awesome-swiper'
		import 'swiper/dist/css/swiper.css'
		Vue.use(VueAwesomeSwiper)
	使用的文件中：
		import 'swiper/dist/css/swiper.css'
		import { swiper, swiperSlide } from 'vue-awesome-swiper'6.xx版本是大写的Swiper
		

demo:
html:
      <!-- 三个可选跳转列表 -->
      <div v-if="swiperShow" id="swiperBox">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide>
            <img :src="setData.main.breakOne" data-skip="skipLink1">
          </swiper-slide>
          <swiper-slide>
            <img :src="setData.main.breakTwo" data-skip="skipLink2">
          </swiper-slide>
          <swiper-slide>
            <img :src="setData.main.breakThree" data-skip="skipLink3">
          </swiper-slide>
          <div slot="pagination" class="swiper-pagination" />
        </swiper>
      </div>
      
script中data:
      swiperShow: false,
      // 轮播图配置
      swiperOptions: {
        // slidesPerView: 'auto',
        // 初始化索引
        initialSlide: 1,
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        // 是否循环(会导致事件不会复制)
        loop: true,
        loopedSlides: 3,
        autoplay: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // pagination: {
        //   el: '.swiper-pagination'
        //   // clickable :true,
        // },
        on: {
          progress: function (progress) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              var slideProgress = this.slides[i].progress
              var modify = 1
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
              }
              var translate = slideProgress * modify * 28 + 'vw'
              var scale = 1 - Math.abs(slideProgress) / 6.6
              var zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
              slide.transform('translateX(' + translate + ') scale(' + scale + ')')
              slide.css('zIndex', zIndex)
              slide.css('opacity', 1)
              if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0)
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              slide.transition(transition)
            }
          },
          // 事件不会被复制，所以直接对dom进行操作
          click: function (swiper, event) {
          }
        }

      },

created:
    // 解决loop:true时前后复制的图片为空的问题
    // 一定要在动态获取到swiper中所需要的数据之后才可执行
    this.swiperShow = false
    this.$nextTick(() => {
      // 获取到图片之后再调用swiper进行复制，否则复制的都是空的
      this.swiperShow = true
      const that = this
      this.swiperOptions.on.click = function (swiper, event) {
        // 直接操作dom
        // this指向swiper实例
        console.log(swiper.target.dataset.skip)
        that.skipGoodsList(swiper.target.dataset.skip, 'main')
      }
    })

style样式：
    #swiperBox {
      position: relative;
      width: 100%;
      margin: 0 auto;
      margin-bottom: 10px;
      .swiper-container {
        .swiper-wrapper {
          .swiper-slide {
            // 图片大小
            width: 195px;
            height: 100px;
            background-color: #fff;
            img {
              display: block;
              width: 195px;
              height: 100px;
            }
          }
        }
      }
    }