vue-awesome-swiper 插件
Swiper 版本区分了组件和普通版本
(1)npm install vue-awesome-swiper –save
(2)在 main,js 里引入(全局):
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'
(3)组件里引入 :
import ‘swiper/dist/css/swiper.css’ //在全局没引入,这里记得要!
import { swiper, swiperSlide } from ‘vue-awesome-swiper’
export default {
components: {
swiper,
swiperSlide
}
}
配置
(4)template
<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> </swiper>
(5)数据
data(){
return{
swiperOption: {
pagination:{
el:'.swiper-pagination'
},
autoplay:{
delay:,
disableOnInteraction:false
}
swiper参数
}
}
}
.
vue-awesome-swiper 插件的更多相关文章
- vue中引入swiper插件
这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...
- 如何在Vue项目中优雅的使用swiper插件
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
- swiper插件的简单使用,实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
- swiper插件遇上tab切换
当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...
- ionic3 使用swiper插件 实现轮播效果
由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题 首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下 自动播放 不断 ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
随机推荐
- Spring Boot 学习系列(01)—从0到1,只需两分钟
此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 快速构建 如果我们想基于spring mvc 提供一个简单的API查询服务,传统的方式,首先需要我们引入sp ...
- 4.2 手写Java PriorityQueue 核心源码 - 实现篇
上一节介绍了PriorityQueue的原理,先来简单的回顾一下 PriorityQueue 的原理 以最大堆为例来介绍 PriorityQueue是用一棵完全二叉树实现的. 不但是棵完全二叉树,而且 ...
- phpStrom/webstrom如何修改Terminal命令行的字体大小
phpstrom.webstrom中有个Terminal窗口效果就是打开cmd.exe,利用它就不用打开本地cmd命令行了. 默认的Terminal字体很大,如何修改呢? 1.Color Scheme ...
- unity sprite怎么获取切割后的图
学习了一段时间的unity,对里面的组件有一个大致的了解,但是具体操作来说还不是很熟悉,今天看了一片关于unity sprite怎么获取切割后的图的文章,感觉还不错. 假设有一张png/tga图集,导 ...
- Java反射学习笔记01
- 如何用dos命令结束进程
ntsd 是一条dos命令,功能是用于结束一些常规下结束不了的死进程. 用法为打开cmd 后输入以下命令就可以结束进程: 方法一:利用进程的PID结束进程 命令格式:ntsd -c q -p pid ...
- LocalBroadcastManager
LocalBroadcastManager mLocalBroadcastManager; BroadcastReceiver mReceiver; //注册通知 mLocalBroadcastMan ...
- Codeforces 1119D(贡献计算)
题目传送 排序看一看. 关键点在于发现性质: 算一个点的贡献时: 1.与后一个有重叠.\[当 a[i] + r >= a[i + 1] + l, 即 r - l >= a[i + 1] - ...
- linux进行文件vim编辑时没有退出文件直接关闭出现E325: ATTENTION Found a swap file by the name "/usr/local/php/etc/.php.ini.swp"
E325: ATTENTIONFound a swap file by the name "/usr/local/php/etc/.php.ini.swp" ow ...
- 阿里云ECS基础知识01