1.最近使用vuecli3开发项目中遇到了一个3d的横向焦点图的轮播,考虑用到swipei组件库来实现这个小功能,效果图如下:

2.在vuecli3中下载swiper

cnpm install swiper@5.4.5  --save

下载完可在package.json中查看

3.在页面中使用swiper

轮播图以及样式

css部分

import "swiper/css/swiper.css";
import Swiper from "swiper";

data() {
    return {
      swiper: null,
    };
  },

mounted(){
	this.swiper = new Swiper(".swiper-container", {
	      autoplay:true,  //是否自动播放 true 是  false 否
	      slidesPerView:3,	//一排展示几个
	      effect:'coverflow',		//轮播图的切换效果  coverflow 3D
	      centeredSlides: true,		// 设定为true时，active slide会居中，而不是默认状态下的居左。
	      spaceBetween:'-50%',		//每个轮播图之间设置距离（单位px）。
	      loop: true,				// 是否循环播放
	      pagination: {
	        el: ".swiper-pagination",
	        clickable: true,
	      },
	      coverflowEffect:{		cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：
	        rotate:0,		//slide做3d旋转时Y轴的旋转角度
	        stretch:50,		//每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
	        depth:100,		//slide的位置深度。值越大z轴距离越远，看起来越小。
	        modifier:4,		//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
	        slideShadows:false	//是否开启slide阴影
	      }
	    });
    }