引用swiper组件可以使用各种好看又炫酷的轮播效果,下面来分享下swiper的使用方法
首先引用swiper组建
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
再挂载到组件中
mounted() {
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 'auto',
loopedSlides: 10,
})
},
这是环路轮播其中的一个效果,在swiper官网上有更多效果样式
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in swipers" :key="item.id"><img :src="item.img_url">
<p class="swiper_title">{{item.title}}</p>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
只需在第一张图中进行遍历和重构样式就行,后面会根据修改的第一个图的样式自动改变。