vue2 使用 swiper 轮播图效果
第一步、先安装swiper插件
npm install swiper@3.4.1 --save-dev
第二步、组件内引入swiper插件
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
第三步、创建模板
<template>
<div class="swiper-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in 16">
<el-image
style="width: 100%; height: 100%"
:src="url"
:preview-src-list="srcList"
fit="fill">
</el-image>
</div>
</div>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-prev btn swiper-button-black"></div>
<div class="swiper-button-next btn swiper-button-black"></div>
</div>
</template>
第四步、mounted里面创建swiper实例就大功告成
mounted () {
this.swiper= new Swiper('.swiper-container', {
//轮播图swiper相关属性
})
}
最后附上完整代码:
<template>
<div class="swiper-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in 16">
<el-image
style="width: 100%; height: 100%"
:src="url"
:preview-src-list="srcList"
fit="fill">
</el-image>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<!-- <div class="swiper-pagination"></div>-->
<!-- 导航按钮 -->
<div class="swiper-button-prev btn swiper-button-black"></div>
<div class="swiper-button-next btn swiper-button-black"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
//轮播图
name:'swiper',
data () {
return {
swiper: null,
url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
},
mounted () {
this.swiper= new Swiper('.swiper-container', {
//速度
speed:2500,
//自动播放设置
autoplay: {
delay: 500,
disableOnInteraction: false,
waitForTransition: false,
},
// //轮播类型
// effect : 'coverflow',
// centeredSlides: true,
// //轮播类型的属性设置
// coverflowEffect: {
// rotate: 90,
// stretch: 10,
// depth: 90,
// modifier: 2,
// slideShadows: true
// },
//前进和后退的按钮
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
centerInsufficientSlides: true,
//循环播放
// loop: true, // slidesPerGroup: 3,
//居中显示
loopFillGroupWithBlank: true,
//展示张数
slidesPerView: 'auto',
})
},
methods:{}
};
</script>
<style lang="scss">
.swiper-container {
width: 100%;
height: 100%;
padding: 15px 55px!important;
.swiper-slide {
width: 290px;
height: 150px;
padding-left: 15px;
display: flex;
justify-content: center;
align-items: center;
}
}
.btn {
height: 40px;
width: 20px;
background-size: contain;
}
</style>
vue2 使用 swiper 轮播图效果的更多相关文章
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- Android项目实战(四十七):轮播图效果Viewpager
简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V 需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- jQuey实现轮播图效果
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
随机推荐
- Numpy对数组按索引查询
Numpy对数组按索引查询 三种索引方法: 基础索引 神奇索引 布尔索引 基础索引 一维数组 和Python的List一样 二维数组 注意:切片的修改会修改原来的数组 原因:Numpy经常要处理大数组 ...
- 在linux环境下安装VMtools(成功)
想在主机和虚拟机之间互相复制文件吗? 想更加方便的联系主机和虚拟机吗? 就安装VMtools吧 其实,在linux下安装VMtools 是非常的简单,只要简单地几步就行了! 第一步:打开虚拟机,在左 ...
- [FireshellCTF2020]ScreenShooter 1
此题关键在于理清逻辑,本地将url发送给服务器,服务器请求sereenshooter以后将结果返回 所以应该在服务器查看日志. 发现了PhantomJS 引擎一下 <!DOCTYPE html& ...
- Hive进行数据统计时报错:org.apache.hadoop.mapreduce.v2.app.MRAppMaster: Error starting MRAppMaster
报错详情: 2020-04-09 22:56:58,827 ERROR [Listener at 0.0.0.0/45871] org.apache.hadoop.mapreduce.v2.app.M ...
- FreeRTOS学习记录--任务创建函数详解
开局一张图.一步一步分析就好. (一)什么是任务? 在多任务系统中,我们按照功能不同,把整个系统分割成一个个独立的,且无法返回的函数,这个函数我们称为任务:任务包含几个属性:任务堆栈,任务函数.任务控 ...
- 让我们写一个 Win32 文本编辑器吧 - 2. 计划和显示
让我们写一个 Win32 文本编辑器吧 - 2. 计划和显示 如果你已经阅读了简介,相信你已经对我们接下来要做的事情有所了解. 本文,将会把简介中基础程序修改为一个窗体应用程序.并对编辑器接下来的编辑 ...
- Servlet学习记录
个人认为servlet属于一种控制程序,可以处理浏览器的请求并做出对应的回应.我们经常使用的是让一个类去继承HttpServlet,然后在doget或者dopost里面写东西. 目前我个人常在doge ...
- OllyDbg---循环、串操作和寻址方式
循环 字符串指令和寻址方式 循环 XOR ECX,ECX MOV ECX,15H LABEL: DEC ECX CMP ECX,0 JNE LABEL LOOP 重复循环,直到计数器的值为0,每次循环 ...
- 修复tunl0-二进制安装calico
这篇博文很重要,出现这个问题导致pod之间无法通讯,pod无法连接外网. 出现的问题是二进制方式安装了节点之后, tunl0没有显示,通过ifconfig tunl0 up 启动tunl0 没有意义, ...
- MySQL8.0.x 版本安装步骤傻瓜式教程【官方版】
MySQL8.0.x 安装 一.下载 MySQL官网下载链接:https://downloads.mysql.com/archives/community/ 选择版本后下载zip文件 博主选择的是8. ...