文章目录
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>
- 引入swiper样式
文件位置:vue项目文件中:node_modules/swiper/css/swiper.min.css
不同版本的Swiper的文件夹结构可能不一样,
总之就是在swiper文件夹下找到swiper.min.css文件即可
- views/FIlm.vue
<template>
<div