文章目录
1.引入swiper.vue组件
目的
在Film中插入一个轮拨图
步骤
- 创建views/Film/Swiper.vue
<template>
<!-- 重命名为filmswiper:目的是有多个轮拨时便于识别 -->
<div class="swiper-container filmswiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
// 引入Swiper的js和css
import Swiper from "swiper" //js
import "swiper/css/swiper.min.css"//css
export default {
mounted() {
new Swiper(".filmswiper",{
loop: true,
//自动轮拨
autoplay:{
delay:2000
},
// 显示分页
pagination: {
el: ".swiper-pagination",
},
})
}
};
</script