vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper

本次使用github上的一个开源插件，使用的是2.6.7稳定版本。安装指定版本的方法：在插件名后面加@版本号，即可

npm install vue-awesome-swiper@2.6.7 --save

引入：需要在main.js里引入如下：

import Vue from 'vue' //这个应该打包的时候就有了
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

使用：新建一个轮播组件swiper.vue

<template><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- slides --> <swiper-slide><img class="swiper-img" src=""></swiper-slide><swiper-slide><img class="swiper-img" src=""></swiper-slide><swiper-slide><img class="swiper-img" src=""></swiper-slide><swiper-slide><img class="swiper-img" src=""></swiper-slide><!-- Optional controls --><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><div class="swiper-scrollbar"   slot="scrollbar"></div></swiper>
</template><script>export default {name: 'carrousel',data() {return {swiperOption: {// some swiper options/callbacks// 所有的参数同 swiper 官方 api 参数// ...}}}
</script>

在需要用的地方引入这个组件就可以了

转载于:https://www.cnblogs.com/Ashe94/p/10553486.html

vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper相关推荐

案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
用RecyclerView打造一个轮播图
通常Android的轮播图(俗名:Banner)都是用ViewPager实现的,但是我在实际项目运用中碰到了一些小问题,于是决定另寻思路,采用RecyclerView这个更优雅更强大的控件来实现轮播的 ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
微信小程序的轮播图+视频+图片（swiper）
项目简介:一个商城小程序需求场景:在首页加一个轮播图,轮播图包含多个视频和多张图片,视频播放,图片页面跳转页面实现技术:swiper 思路(一):刚开始写的时候,用的是将video直接嵌套在swi ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...

vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper

vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper相关推荐

最新文章

热门文章