vue 轮播插件使用
<template>
<div>
<Swiper ref="swiper" v-if="list.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
<Slide @click="clickMe" v-for="(tag,key) in list" :key="key">
<img :src="tag.img" />
</Slide>
</Swiper>
<div><button @click="preve">上一张</button></div>
<div><button @click="next">下一张</button></div>
</div>
</template> <script>
import { Swiper, Slide } from 'vue-swiper-component';
export default {
data() {
return {
list: [
{ img: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
{ img: 'https://qiniu.epipe.cn/5430983074181545984?imageslim&imageView2/1/w/750/h/360' },
{ img: 'https://qiniu.epipe.cn/5464226412548325376?imageslim&imageView2/1/w/750/h/360' }
]
}
},
components: {
Swiper,
Slide
},
methods: {
clickMe (index){
console.log(index)
},
preve(){
this.$refs.swiper.prevSlide();
},
next(){
this.$refs.swiper.nextSlide();
} }
} </script> <style>
img {
width: 100%;
} .button {
margin-top: 30px;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
line-height: 2.33333333;
border-radius: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: hidden;
border-width: 0;
width: 50%;
padding: 0 30px 0 30px;
outline: 0;
-webkit-appearance: none;
background-color: #26a2ff;
} .button:active {
opacity: 0.5;
color: #333;
} .button2 {
margin-top: 100px;
}
</style>
参考地址
https://github.com/zwhGithub/vue-swiper
使用方法//
npm i vue-swiper-component --save
cnpm i vue-swiper-component --save //国内镜像
import { Swiper, Slide } from 'vue-swiper-component'; components: {
Swiper,
Slide
}
//加一些参数配置情况
<Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
<Slide @click="clickMe" v-for="(tag,key) in slidesReal" :key="key">
//添加click事件
</Slide>
</Swiper>
属性 | 说明 | 默认 |
---|---|---|
autoPlay | 是否自动轮播 | true |
showIndicator | 是否显示轮播的那个点 | true |
interval | 每两次隔多久滚动一次 | 2500 |
duration | 每次滚动一页需要多久时间 | 500 |
Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper> ✅ this.$refs.swiper.prevSlide(); // 上一张图
✅ this.$refs.swiper.nextSlide(); // 下一张图
✅ this.$refs.swiper.slideTo(2); //某一张图
vue 轮播插件使用的更多相关文章
- vue轮播插件vue-awesome-swiper
https://surmon-china.github.io/vue-awesome-swiper/ 第一步安装 npm install vue-awesome-swiper --save 第二部在m ...
- 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- vue轮播,不是只有左右切换的,还有只切换src的
在项目中,初次接触vue,看了轮播插件vue-swiper等,好多都是左右切换的.个人强迫症比较严重,就要单页切换样式,就手写了一个. 功能:自动轮播,上一页下一页,点击小圆点切换大图.基本轮播要求的 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 多预览小图焦点轮播插件lrtk
多预览小图焦点轮播插件lrtk // JavaScript Document $(document).ready(function(){ //$('#select_btn li:first').css ...
- 推荐:图片轮播插件Nivo Slider
因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的. ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
随机推荐
- 11_传智播客iOS视频教程_NS前缀和@符号
NS前缀的有NSLog和NSString Cocoa就是用来开发带界面的应用程序. Foundation框架之中的类.函数绝大多数都是从NextStep来的.看到NS前缀就知道这个类是从哪里来的.是很 ...
- bzoj 1089: [SCOI2003]严格n元树【dp+高精】
设f[i]为深度为i的n元树数目,s为f的前缀和 s[i]=s[i-1]^n+1,就是增加一个根,然后在下面挂n个子树,每个子树都有s[i-1]种 写个高精就行了,好久没写WA了好几次-- #incl ...
- bzoj 1565 [NOI2009]植物大战僵尸【tarjan+最大权闭合子图】
一上来以为是裸的最大权闭合子图,上来就dinic -然后没过样例.不得不说样例还是非常良心的给了一个强连通分量,要不然就WA的生活不能自理了 然后注意到有一种特殊情况:每个植物向他保护的植物连边(包括 ...
- Spring boot下,集成任务调度中心(XXL-JOB)
一.使用背景 目前项目中,采用的是微服务框架,由于在微服务中,存在需要定时的任务.但如果定时任务维护在每个微服务下,当微服务部署多个实例的情况下,会出现定事任务多次执行的情况.并且在解决问题的基础上, ...
- 【爬坑系列】之kubernetes环境搭建:二进制安装与镜像安装
准备: 网上教如何编译与安装kubernetes的教程很多,需要提前准备的也很多,比如关闭selinux,防火墙啦....但有一点一定要注意,编译kubernetes源码时要求有2G内存,这个可是实打 ...
- MFC中利用CString和Format成员函数将数字格式化输出
str.Format("格式控制字符串”,输出列表): 格式控制字符串包括格式字符串和非格式字符串,用双引号括起来.其中非格式字符串原样输出. 格式字符串是以%开头的字符串:%[标识][输出 ...
- java中的位预算
public class Demo { public static void main(String[] args) { byte num1 = 3; byte num2 = 5; /*位预算 *nu ...
- eclipse设置Tomcat超级详细
刚接触Ajax,创建了jsp文件发现错误 必备软件:tomcat(从apache的官方网站上下载一个,我的是apache-tomcat-8.0.28) 需要下载tomcatPluginV321.zip ...
- 掌握Spark机器学习库-07-回归分析概述
1)回归与分类算法的区别 回归的预测结果是连续的,分类的预测结果是离散的. 2)spark实现的回归算法有: 3)通过相关系数衡量线性关系的程度
- iOS---UICollectionView详解和常用API翻译
UICollectionView 1.必须要设置布局参数 2.注册cell 用法类似于UITableView 类.自动实现重用,必须注册初始化. 使用UICollectionView必须实现UICol ...