vue中使用vue-awesome-swiper自定义按钮
vue中使用vue-awesome-swiper实现轮播记录
vue-awesome-swiper安装
npm install vue-awesome-swiper --save
安装好之后，在main.js文件中导入
import VueAweSomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'Vue.use(VueAweSomeSwiper)然后在组件中就可以使用了
dom
文章图片
js
css
//这里去掉了scoped ，而且一定要去掉，本人亲自尝试，就因为这点，来来回回折腾了快一天.container-swiper{
width: 100%;
height: 2.11rem;
overflow: hidden;
}
.swiper-container{
height: 2.11rem;
width: 100%;
margin: 0px auto;
}
.swiper-slide a{
display: block;
}
.swiper-slide a img{
width: 100%;
height: 2.11rem;
}
.swiper-pagination{
height: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.swiper-pagination .my-bullet{
border-radius: 50%;
width: 4px;
height: 4px;
margin: 4px;
background: #000000;
display: block;
}
.swiper-pagination .my-bullet-active{
display: block;
background: #000000;
width: 10px;
height: 4px;
border-radius: 2px;
}最重要的就是，一定不要加scoped，另外去掉scoped的话样式是对全局生效的，所以要注意自定义样式的命名
文章图片
问题1： 【vue中使用vue-awesome-swiper自定义按钮】有时候点击分页器，轮播就不能继续了，根本原因是是少了一个属性
autoplay: {
delay: 5000,
//加上这句就好了
disableOnInteraction: false
},
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 由浅入深理解AOP
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 我眼中的佛系经纪人