vue使用swiper实现轮播图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
(记录学习的过程)
1.安装插件
npm install vue-awesome-swiper@3.1.3 --save
npm install swiper@6.3.5 --save
2.main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)
3.
<swiper :options="swiperOption" class="swiper-container swiper-pagination1" ref="mySwiper">
<!-- 添加的图片 -->
<swiper-slide>
<img class="banner-img" src="../../assets/main.png" :style="{width:'150px',height:'80px'}"/>
</swiper-slide>
<swiper-slide>
<img class="banner-img" src="../../assets/main.png" :style="{width:'150px',height:'80px'}"/>
</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>
4.return里面添加
swiperOption: {
pagination: '.swiper-pagination1',
slidesPerView: 1,
spaceBetween: 30,
centeredSlides: false,
spaceBetween: 0,
onSlideChangeEnd: swiper => {
//放swiper的回调方法
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
},
//左右导航栏
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//自动播放
autoplay:{
delay:2000,
disableOnInteraction:false
},
//指示点
pagination: {
el: '.swiper-pagination',
clickable: true,
},
//循环
loop:true
},
5.
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted(){
this.swiper.slideTo(0, 0, false);
} ,
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)