效果圖
預覽地址
https://sxs1995.github.io/vueSwiper/dist/index.html#/
代碼
<!--
* @Author: shenxsh
* @Date: 2019-05-31 10:21:03
* @LastEditTime: 2019-05-31 11:44:06
* @LastEditors: Do not edit
* @Description: 常用的swiper移動端效果
-->
<template>
<div class="home">
<h3>1.中間顯示完整,兩邊少量顯示</h3>
<swiper :options="option1">
<swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index">
<div class="box">item{{index}}</div>
</swiper-slide>
</swiper>
<h3>2.左側顯示完整,右側少量顯示</h3>
<swiper :options="option2">
<swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index">
<div class="box">item{{index}}</div>
</swiper-slide>
</swiper>
<h3>3.中間突出顯示,兩邊縮放</h3>
<div class="option3">
<swiper :options="option3">
<swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index">
<div class="box">item{{index}}</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
let _this = this;
return {
option1: {
slidesPerView: 1.18, //顯示slide的數量
centeredSlides: true, //居中顯示
loop: true, //循環
initialSlide: 1, //初始索引
spaceBetween: 15, //間距
on: {
click: function() {
// 獲取點擊的索引.
const realIndex = this.realIndex;
// 此處可自定義點擊事件,注意此處this指向swiper,定義_this
}
}
},
option2: {
slidesPerView: 2.15,
spaceBetween: 15
// slidesOffsetBefore: -1 //左偏移
},
option3: {
slidesPerView: 1.49,
centeredSlides: true,
loop: true,
touchRatio: 1, //觸摸距離與slide滑動距離的比率。
spaceBetween: 0
}
};
}
};
</script>
<style lang="less" scoped>
.home {
width: 100%;
padding-bottom: 40px;
.box {
background: red;
height: 200px;
color: #fff;
line-height: 200px;
text-align: center;
font-size: 24px;
}
}
.option3 {
.box {
height: 300px;
}
.swiper-slide:not(.swiper-slide-active) {
transition: 400ms;
transform: scale(0.85);
}
}
</style>
第三個需要css控制
.option3 {
.box {
height: 300px;
}
.swiper-slide:not(.swiper-slide-active) {
transition: 400ms;
transform: scale(0.85);
}
}