好友
阅读权限10
听众
最后登录1970-1-1
|
本帖最后由 被遗忘的路人 于 2021-2-7 12:14 编辑
不喜勿喷, 大佬绕道
第一步, 先安装 swiper 插件, 命令: npm i swiper
第二步, 引入使用, 这块有很大的问题.
首先 VUE 3.0 已经不支持 Vue.use(); 这种写法了, 大家不要跳这个坑了.
网上百度到的全部让你这样弄, 一弄一个坑.
关于修改 分页器 样式的
加上深度修改 /deep/ 或者 >>>
贴上成品
[HTML] 纯文本查看 复制代码 <template>
<div class="swiperComponent">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(items, key) in swiperList" :key="key">
<div class="swiper-BgMap" :style="{ backgroundImage: 'url('+ items.bgMap +')' }"></div>
</div>
</div>
<div class="swiper-pagination" slot="pagination"></div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.less';
import SwiperCore, { Pagination, Autoplay} from 'swiper';
SwiperCore.use([ Pagination, Autoplay]);
export default {
name: "swiperComponent",
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperList: [
{
id: 0,
bgMap: require("@assets/banner/banner_01.png"),
annotate: "背景图第一张"
}, {
id: 1,
bgMap: require("@assets/banner/banner_01.png"),
annotate: "背景图第二张"
}, {
id: 2,
bgMap: require("@assets/banner/banner_01.png"),
annotate: "背景图第三张"
}
]
}
},
mounted() {
this.$nextTick(() => {
new SwiperCore(".swiper-container", {
loop: true,
autoplay: {
delay: 1000000,
disableOnInteraction: false
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
});
}
}
</script>
<style scoped>
.swiperComponent {
position: relative;
}
.swiperComponent, .swiper-container, .swiper-slide, .swiper-BgMap {
width: 100%;
height: 100%;
}
.swiper-BgMap {
max-width: 1920px;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.swiper-pagination {
position: absolute;
z-index: 999999;
left: 0;
right: 0;
bottom: 25px;
margin: auto;
height: 15px;
width: 285px;
display: flex;
overflow: hidden;
}
.swiper-container >>> .swiper-pagination-bullet {
width: 30px;
height: 13px;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
margin-right: 15px;
border: 1px solid #FFFFFF;
}
.swiper-container >>> .swiper-pagination-bullet:last-of-type {
margin-right: 0 !important;
}
.swiper-container >>> .swiper-pagination-bullet-active {
width: 90px;
background-color: #FFFFFF;
}
</style> |
|
发帖前要善用【论坛搜索】功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。 |
|
|
|
|