vue2 使用swiper+vue-awesome-swiper轮播

1，npm安装swiper，vue-awesome-swiper

"swiper":"^5.4.5",
"vue-awesome-swiper":"^3.1.3"

示例一

// 公司详细信息
export const companyProfile = {
  // 设置为true启动自动切换，并使用默认的切换设置。
  autoplay: {
    // 自动切换的时间间隔
    delay: 5000,
    // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
    stopOnLastSlide: false,
    // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    disableOnInteraction: false,
    // 开启此功能，鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
    pauseOnMouseEnter: true,
  },
  speed: 1000,
  effect: "cube",
  cubeEffect: {
    slideShadows: false,
    shadow: false,
    shadowOffset: 0,
    // shadowScale: 0.6,
  },
  slidesPerView: 1,
  // lazy: {
  //   loadPrevNext: true,
  // },
  // direction: "horizontal", // 水平切换选项
  loop: true, // 循环模式选项
  //修改swiper自己或子元素时，自动初始化swiper
  observer: true,
  //修改swiper的父元素时，自动初始化swiper
  observeParents: true,
  // effect: "flip",
  // flipEffect: {
  //   slideShadows: true,
  //   limitRotation: true,
  // },

  // 分页
  // pagination: {
  //   el: ".swiper-pagination",
  //   clickable: true,
  //   // bulletClass: "my-bullet", //需设置.my-bullet样式
  //   // // bulletActiveClass: "my-bullet-active",
  //   // renderBullet: function (index: number, className: string) {
  //   //   return '<span class="' + className + '">' + (index + 1) + "</span>";
  //   // },
  //   // renderBullet(index, className) {
  //   //   return `<span class="${className} swiper-pagination-bullet-custom">第${toChinesNum(
  //   //     index + 1
  //   //   )}页</span>`;
  //   //   //toChinesNum这个方法参照我的公用方法上面链接
  //   // },
  // },
};

示例二

// 公司产品
export const companyProduct = {
  // 设定初始化时slide的索引
  initialSlide: 2,
  // 设置为true启动自动切换，并使用默认的切换设置。
  autoplay: true,
  // 设置是否允许触摸滑动
  allowTouchMove: false,
  slidesPerView: 5,
  // lazy: {
  //   loadPrevNext: true,
  // },
  // spaceBetween: 200,
  direction: "horizontal", // 水平切换选项
  // loop: true, // 循环模式选项
  //切换效果   3d流
  effect: "coverflow",
  //为true默认居中 默认居左
  centeredSlides: true,
  coverflowEffect: {
    //3d旋转角度
    rotate: 0,
    //每个slide之间的拉伸，越大靠的越紧
    stretch: -30,
    //深度值，越大距离越远，看起来越小
    depth: 78,
    //值越大，效果越明显
    modifier: 3,
    //是否开启阴影
    slideShadows: false,
  },
  //修改swiper自己或子元素时，自动初始化swiper
  observer: true,
  //修改swiper的父元素时，自动初始化swiper
  observeParents: true,
};

示例三

// 所有公司列表
export const companyListOptions = {
  //slide可见数量
  slidesPerView: "auto",
  //切换时间间隔
  // autoplay: {
  //   delay: 10000,
  //   // 当用户滑动图片后继续自动轮播
  //   disableOnInteraction: false,
  // },
  // Swiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical 。
  direction: "vertical",
  // loop: true,
  //鼠标变为抓手
  grabCursor: true,
  // 高度自适应
  autoHeight: true,
  //修改swiper自己或子元素时，自动初始化swiper
  observer: true,
  //修改swiper的父元素时，自动初始化swiper
  observeParents: true,
};

1，cubeEffect 切换问题
使用版本：4.1.1。
bug描述：使用cube切换效果，当切换到最后第二个时页面上会有元素在乱飞，循环到到二轮时页面元素也会乱飞载入。
解决方案：替换到3.1.3版本。

{
effect:'cube',
cubeEffect:{
	slideShadows:false,
	shadow:false,
	shadowOffset:0,
	shadowScale:0
},
autoplay:{
	delay:10000,
	stopOnLastSlide:false,
	disableOnInteraction:false,
	pauseOnMouseEnter:true,
},
loop:true,	//开启循环模式
}