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用的滚屏插件,看着不 ...
随机推荐
- Black Box--[优先队列 、最大堆最小堆的应用]
Description Our Black Box represents a primitive database. It can save an integer array and has a sp ...
- C#基础:对委托的简单理解
在编程过程中,我们习惯把数据作为参数传递给方法(例:int a=int.Parse(“20”);).是否能将一个方法传递给另一个方法呢?是不是听起来有点奇怪!!! 线程大家应该熟悉吧,在计算机中并行运 ...
- MS SQL server对象类型type
执行下面代码,将获取ms sql server对象类型以及其说明 IF OBJECT_ID('tempdb.dbo.#type') IS NOT NULL DROP TABLE #type CREAT ...
- TP5之一次选择多张图片并预览
点击选择图片(可选多张),确定后将选择的图片显示在页面上,已经选择的图片也可以删除,点击提交将图片提交给后台. 1.效果图 2.code 用input标签并选择type=file,记得带上multip ...
- 百度地图API示例 JS
http://developer.baidu.com/map/jsdemo.htm#c2_2
- HDU2819【二分匹配与矩阵的秩】
题意: 给出一个矩阵问能否实现对角线全部是1,能的话输出路径,不能的话输出-1 思路: 首先根据矩阵的性质,这一定是一个满秩矩阵,所以只根据行或列交换就一定能实现. 所以行和列构成二分图,然后跑一发匈 ...
- Lightoj 1147【DP】
题意: 把n个人分成两部分,要你怎么分使得两部分尽可能相等: 思路: 如果我们把一部分人的重量达到离sum/2最近,那就一定行啊 其实就是一条棒,两种不同的棒去拼接成一条棒,然后最好就是离mid最近, ...
- 根运动 (Root Motion) – 工作原理
http://blog.csdn.net/myarrow/article/details/45505085 1. 基本概念 在Unity3D动画中,模型的位置.角度经常会发生变化,我们需要决定是否将模 ...
- log4j和log4j2怎么动态加载配置文件
应用场景与问题 当项目在运行时,我们如果需要修改log4j 1.X或者log4j2的配置文件,一般来说我们是不能直接将项目停止运行再来修改文件重新部署的.于是就有这样一个问题:如何在不停止当前项目的运 ...
- 测试 | Mock object
实例: 一个简单的图书管理系统包括三个类: Book提供了书籍的定义 BookService提供了有关书籍借阅和归还的服务 BookMananger查找书籍并把对书籍状态的更改更新到数据库中 目前,B ...