<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide>
<img
class="img-swiper"
src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20201/8216fd250c35366befc35f6353f934b9.jpg_890x330_9062b3ba.jpg"
alt
/>
</swiper-slide>
<swiper-slide>
<img
class="img-swiper"
src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20201/86ca4dc2777b997607e97eb8471dcafd.jpg_890x330_0eee7728.jpg"
alt
/>
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "HomeSwiper",
data() {
return {
swiperOption: {
pagination: ".swiper-pagination",
loop: true
}
};
}
};
</script>
<style lang="stylus" scoped>
// .wrapper >>> .img
.wrapper
overflow hidden;
width 100%;
height 0px;
padding-bottom 37%;
background #eee;
.img-swiper
width 100%;
overflow hidden;
// object-fit:cover;
// height 200px;