vue 可以直接使用插件
效果如图:
主要设置如下:
<swiper class="service-advantage" ref="carouselSwiper" :options="swiperOptions">
<swiper-slide v-for="(item,index) in serviceAdvantageData" :key="`item${index}`">
<div class="card-area">
第{{index}}张swiper-slide
</div>
</swiper-slide>
</swiper>
参数设置:
swiperOptions: {
slidesPerView: 2, //设置slider容器能够同时显示的slides数量,可以是小数,设置为2时,如图所示,设置为3则会出现三张完整的active slide,如API的例子,即设置为偶数时会自动使两边的缩进,类似遮盖一半的效果
spaceBetween: 30,
centeredSlides: true,//设定为true时,active slide会居中,而不是默认状态下的居左
loop: true,
slideToClickedSlide: true,//true:点击slide会过渡到这个slide,默认false
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
样式调整:
.swiper-slide {
height: 95%;
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.8);
border-radius: 12px;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
备注:
vue-awesome-swiper的使用:
1、安装:
npm install swiper@5.4.5 --save-dev
npm install vue-awesome-swiper@4.1.1 --save-dev
目前安装的版本是:
"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",
2、main.js内全局引入:
// swiper切换
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";
Vue.use(VueAwesomeSwiper);
就可以像上面代码使用了。
注:
// (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// (<= Swiper 5.x)
import "swiper/css/swiper.css";
根据安装版本及vueCli版本的不同,可能会报类似找不到css的错误,如下:
解决方式:
改变引入css的方式。
代码中使用的是 (<= Swiper 5.x)的引入方式,但是vueCli换成@vue/cli 5.0.1生成项目后
import “swiper/css/swiper.css”;这种引入方式就会报错,提示找不到,可尝试用下面的引入方式:
import 'swiper/dist/css/swiper.min.css'
//import 'swiper/dist/js/swiper.min' //未压缩版
说明:
获取当前slide下标:
data内声明:
data() {
const self = this;
return{
swiperOptions: {
direction: 'vertical',
autoHeight: true,
mousewheel: false, //可鼠标滑动切换
threshold: 50, //拖动的临界值
touchAngle: 10, //允许触发拖动的角度值
on: {
slideChangeTransitionEnd: function (swiper) {
// console.log(this.activeIndex);
self.index = this.activeIndex; //这里的this指向swiper实例,activeIndex是里面的一个内置属性,也就是激活slide的下标(从0开始)
},
click: function (swiper) {
// 通过$refs获取对应的swiper对象
// let swiper = this.$refs.mySwiper.swiper;
},
},
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}