Recently, the company's homepage was upgraded and changed from the original long picture to a carousel. At that time, I felt that a plug-in was quickly solved. I didn't expect a plug-in to experience many pitfalls. Don’t say much, just go to the demo
The first step: installation depends on cnpm install [email protected] --save, cnpm install [email protected] --save Note that different versions may have different configuration syntax, please pay attention to this pit
Step 2: Local reference or global reference component, I use local reference in the project
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper,
swiperSlide
},
directives: {
swiper: directive
},
data() {
return {
url: '',
bannerList: [],
swiperOption: {
observer: true, // When modifying swiper itself or its child elements, swiper is automatically initialized
observeParents: true, // When modifying the parent element of the swipe, the swipe is automatically initialized
centeredSlides: true,
autoplay: 3500,//Carousel interval
autoplayDisableOnInteraction: false,//After clicking the tab, restart autoplay
loop: true,//loop
pagination:'.swiper-pagination',//show small dots
paginationClickable: true,//Control dot paging click controllable
}
}
},
}
</script>
Step 3: Use components in templates
<template>
<div>
<swiper
v-if="bannerList.length>0"
ref="mySwiper"
:options="swiperOption"
:auto-destroy="true"
>
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img :src="`${url}/${item.coverImg}`" />
</swiper-slide>
<div slot="pagination"></div>
<!-- <div slot="button-prev"></div>
<div slot="button-next"></div> -->
</swiper>
</div>
</template>
Step 4: Modify some styles to achieve the effect you want
<style lang="less" scoped>
.swiper-slide{
width:1920px;
height:340px;
text-align:center;
img{
width:1920px;
height:340px;
}
}
</style>
Author: Sui yuan super