vue自定义轮播图组件|vue自定义轮播图组件 swiper
1.banner 组件
components/Banner.vue
.swiper-container {
width: 100%;
height: 200px;
.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
2.swiper 组件
components/Swiper.vue
文章图片
.swiper-container {
width: 100%;
height: 200px;
margin-top: 10px;
.swiper-wrapper {
width: 100%;
height: 100%;
.swiper-slide {
background-size: cover;
width: 100%;
height: 200px;
img {
width: 100%;
height: 100%;
}
}
}
}
3.页面调用
4.效果图
【vue自定义轮播图组件|vue自定义轮播图组件 swiper】
文章图片
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 列出所有自定义的function和view
- VueX--VUE核心插件
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件