<template>
<div class="banner">
<swiper ref="mySwiper" :options="swiperBanner" style="height:440px;">
<swiper-slide
:key="index"
v-for="(item, index) in bannerList"
style="height:440px;"
>
<!-- <router-link to="/"> -->
<img
:src="item.src"
alt=""
width="100%"
height="100%"
style="object-fit: cover;"
/>
<!-- </router-link> -->
</swiper-slide>
</swiper>
<div class="swiper-button-prev-filter" @click="next()">
<i class="el-icon-d-arrow-left" />
</div>
</template>
data() {
return {
swiperBanner: {
loop: true,
slidesPerView: 4, //显示个数
observer: true,
observeParents: true,
},
}
样式:
.swiper-button-next {
width: 24px;
height: 100%;
top: 0;
right: 0;
}
.swiper-button-prev-filter {
position: absolute;
width: 24px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(0, 0, 0, 0.6);
top: 0px;
right: 0;
z-index: 2;
cursor: pointer;
}
mounted() {
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
//如果需要自动切换海报
// autoplay: {
// delay: 1000,//时间 毫秒
// disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
// },
})
}
}
首先要安装:
npm install swiper vue-awesome-swiper --save
swiper
非常有名的一款 实现滚动切换效果的第三方:
- 小程序: swiper 就是参考的 swiper 制作
- ionic: ion-slides 也是基于 swiper 制作
官网: https://www.swiper.com.cn/
vue2版本 swiper用法: https://github.com/surmon-china/vue-awesome-swiper
安装命令
npm install [email protected] vue-awesome-swiper --save
官方提供的 demo: https://github.surmon.me/vue-awesome-swiper/
main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)