vue中使用swiper
1.安装swiper,执行npm install vue-awesome-swiper --save命令
2.在main.js中添加下面三行
import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)
3.在当前页面引入:
import Swiper from 'swiper';import 'swiper/dist/css/swiper.min.css';
4.在html部分添加:
<swiper :options="swiperOption"> <swiper-slide>slide1</swiper-slide> <swiper-slide>slide2</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper>
5.将下面js部分添加到data里面:
swiperOption: { pagination: { el: '.swiper-pagination', clickable: true // 允许点击小圆点跳转 }, autoplay: { delay: 3000, disableOnInteraction: false // 手动切换之后继续自动轮播 }, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } },
具体用法见官方文档
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步