使用版本
"swiper": "5.4.5",
"vue-awesome-swiper": "^4.1.1",
安装
cnpm install swiper vue-awesome-swiper --save
引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
使用
在组件中应用,根据具体情况自行配置,具体参考swiper官方文档
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in banners" :key="item.title">
<img :src="item.url" alt="">
<div class="bannerTitle"><div class="titleC">{{item.title}}</div></div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
computed: {
new Swiper ('.swiper-container', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
loop: true, // 循环模式选项
autoplay: { // 可选选项,自动滑动
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
observer: true,
observeParents: true,
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar'
}
})
}
.swiper-container{
position: relative;
display: inline-block;
width: 100%;
height: 24rem;
overflow: hidden;
.swiper-slide{
img{
width: 100%;
height: 100%;
}
.bannerTitle{
line-height: 2rem;
width: 100%;
position: absolute;
height: 2rem;
bottom: 0px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.9);
z-index: 9999;
.titleC{
width: 26rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}