共计 1251 个字符,预计需要花费 4 分钟才能阅读完成。
需求
swiper 默认显示 3 个,且中间放大,如图:
组件
vue-awesome-swiper –? 基于 swiper.js
具体的配置和 demo 可以去官网查看~
示例
⚠️ 当前 slide 居中通过 options 配置,放大通过 css 控制!
<swiper ref="mcSwiper" class="echw-fb-swiper" :options="swiperOption" > | |
<swiper-slide class="echw-fb-swiper-slide" v-for="(item, idx) in userContentImg" :key="idx"> | |
<img :src="item"> | |
</swiper-slide> | |
</swiper> | |
// npm install vue-awesome-swiper | |
import 'swiper/dist/css/swiper.css'; | |
import {swiper, swiperSlide} from 'vue-awesome-swiper'; | |
export default { | |
components: { | |
swiper, | |
swiperSlide, | |
}, | |
data () { | |
return { | |
// 图片轮播配置 | |
swiperOption: { | |
centeredSlides: true, // 当前 slide 居中显示 | |
slidesPerView: 'auto', // 1 是显示 1 个 banner, 'auto' 自适应 | |
spaceBetween: 12, // slide 间隔(px)loop: true, | |
autoplay: 3000, | |
simulateTouch: true, // 鼠标拖拽 | |
allowTouchMove: true // 触摸滑动 | |
}, | |
userContentImg: ["1.png","2.png"], // n 个 | |
} | |
}, | |
} | |
// scss | |
$base-font-size: 37.5px; | |
@function px2rem($px) {@return ($px / $base-font-size) * 1rem / 2; | |
} | |
// swiper | |
.echw-fb-swiper { | |
width: 100%; // 外层 dev 有宽度 | |
height: px2rem(300px); | |
} | |
// swiper-slide -- 无论是不是当前 slide,宽高保持不变 | |
.echw-fb-swiper-slide {width: px2rem(660px); | |
height: px2rem(300px); | |
// 图片居左 | |
img{ | |
display: block; | |
width: px2rem(500px); | |
height: px2rem(260px); | |
margin: px2rem(20px) 0; | |
border-radius: px2rem(12px); | |
} | |
} | |
// 当前 slide -- 图片放大 | |
.swiper-slide-active { | |
img {width: px2rem(660px); | |
height: px2rem(300px); | |
margin: 0; | |
} | |
} | |
// 前 slide -- 图片居右 | |
.swiper-slide-prev { | |
img {margin-left: px2rem(160px); | |
} | |
} | |
正文完