<template>
<div class="home page-padding-bottom page-padding-top">
<!-- <page-top txt="购买" :isLeft="false"/> -->
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>
<div class="ll" style="background: red;"></div>
</swiper-slide>
<swiper-slide>
<div class="ll" style="background: yellow;"></div>
</swiper-slide>
<swiper-slide>
<div class="ll" style="background: blue;"></div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOptions: {
loop: true,
slidesPerView: 3, // 一个slide中展示几项
centeredSlides: true, // 居中展示
pagination: {
el: '.swiper-pagination'
},
on: {
slideChangeTransitionEnd: function () {}
}
}
}
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
mounted () {
console.log('Current Swiper instance object', this.swiper)
// this.swiper.slideTo(3, 1000, false)
},
methods: {}
}
</script>
<style lang="scss">
.home {
.swiper-slide {
width:80%;
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.9);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
transform: scale(1);
}
.ll{
width: 100%;
height: 3rem;
}
}
</style>
css transform控制大小
标签：flex,veu,center,align,slide,两边,webkit,swiper From： https://www.cnblogs.com/syc5/p/17102409.html