vue轮播插件vue-awesome-swiper

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

在组件中使用插件

<swiper :options="swiperOption"  ref="mySwiper">  <!-- 这部分放你要渲染的那些内容 -->  <swiper-slide v-for="item in items"> <img :src="item" class="index_img"></swiper-slide>  <!-- 这是轮播的小圆点 -->  <div class="swiper-pagination" slot="pagination"></div>  </swiper>

import { swiper, swiperSlide } from 'vue-awesome-swiper'export default{name:'index',components: {  swiper,  swiperSlide  },  data() {  return {items:['../static/bg4.jpg','../static/bg5.jpg','../static/bg7.jpg'],swiperOption: {  pagination: '.swiper-pagination',  slidesPerView: 'auto',  centeredSlides: true,  paginationClickable: true,onSlideChangeEnd: swiper => {  //这个位置放swiper的回调方法  this.page = swiper.realIndex+1;  this.index = swiper.realIndex;  },  }, swiperSlides: [1, 2, 3, 4, 5]  }  },  //定义这个sweiper对象
        computed: {  swiper() {  return this.$refs.mySwiper.swiper;  }  },  mounted () {  //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  //this.swiper.slideTo(0, 0, false);
        }  }

转载于:https://www.cnblogs.com/songrimin/p/6905136.html

vue轮播插件vue-awesome-swiper相关推荐

【Vue轮播插件】常用的vue轮播插件整理
写在前面: 现成的轮播插件是很方便,如果只是对文本类的数据进行轮播就很容易满足需求.但是,实际开发中,表格中可能还嵌套了自己封装的组件,组件中又是通过echarts图表来实现的.这个时候,这些vue插 ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
基于Vue的响应式轮播插件|vue-owl-carousel
vue-owl-carousel 是一个基于Vue的响应式轮播插件,灵感来源于 jQuery 插件 owlCarousel. 它提供了类似于 owlCarousel 的 API 和功能,同时结合了 V ...
一款好用的轮播插件swiper，适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"><div cla ...
swiper轮播插件的使用
swiper轮播插件的使用引入js文件 <script src="./js/swiper-3.4.2.min.js"></script> 接收后台返回的轮 ...
swiper.js横向轮播插件
下载地址使用swiper.js轮播插件构造的图片切换效果,点击左右箭头切换图片,不错的图片横向轮播插件. dd:
android开源轮播图框架,最好用的轮播插件框架都在这里了，Github流行轮播框架...
一般来说,一个完整的WEB项目都少不了使用JavaScript轮播插件.对于整个简单的轮播插件,有时会我们会要求它有更可控的样式,不同的使用场景也需要不同的样式,最理想的轮播插件就是可定制.除了原生开 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
boostrap 鼠标滚轮滑动图片_BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)...
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项 ...

vue轮播插件vue-awesome-swiper

vue轮播插件vue-awesome-swiper相关推荐

最新文章

热门文章