vue-awesome-swiper实现轮播图
1.首先通过npm安装vue-awesome-swiper,我在项目中用的是2.6.7版本
npm install vue-awesome-swiper@2.6.7 –save
2. 在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.实现轮播图
- <template>
- <div class="wrapper">
- <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" >
- <!-- slides -->
- <swiper-slide v-for="item of list" :key="item.id">
- <img class="swiper-img" :src="item.imgUrl"/>
- </swiper-slide>
- <div class="swiper-pagination" slot="pagination"></div>
- </swiper>
- </div>
- </template>
- <script>
- export default {
- name:"HomeSwiper",
- props:{
- list:Array
- },
- data (){
- return{
- swiperOption:{
- pagination:".swiper-pagination",
- autoplay: 2000,
- loop:true,
- paginationClickable: true,
- observer:true,
- observeParents:true
- }
- }
- } ,
- computed: {
- showSwiper () {
- return this.list.length
- }
- }
- }
- </script>
- <style lang="stylus" scoped>
- .wrapper >>> .swiper-pagination-bullet-active
- background:#fff
- .wrapper
- overflow:hidden
- width:100%
- height 0
- padding-bottom:31.25%
- background:#eee
- .swiper-img
- width:100%
- </style>
vue-awesome-swiper实现轮播图的更多相关文章
- 微信小程序之 Swiper(轮播图)
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...
- Swiper实现轮播图效果
为了实现轮播图(carousel)效果或左右滑动显示不同的内容,我们采用Swiper来实现. 需要引入swiper.min.css和swiper.min.js,文件可从https://github.c ...
- 微信小程序-swiper(轮播图)抖动问题
ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
- vue上的简单轮播图
好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...
- (网页)swiper.js轮播图插件
Swiper4.x使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html&g ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白
我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...
- angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper npm install --save swiper 或者 bower install --save swiper 引入文件 ...
- swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- React Native 之轮播图swiper组件
注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...
随机推荐
- Java Script 第二章.
对象: JavaScript中的所有事物都是对象:字符串,数组,数值,函数..... JavaScript中提供多个内建对象,比如说 String, Date, Array等等.对象只是带有属性和 ...
- tomcat mamcached session共享方法
下载后输入命令安装命令: c:\memcached\memcached.exe -d install 然后再输入如下命令把其作为win service常驻启动: c:\memcached\memcac ...
- PHPExcel探索之旅---阶段四 导入文件
步骤就是:实例化excel读取对象=> 加载excel文件 => 读取excel文件(全部读取.逐行读取) <?php header("Content Type :text ...
- 记录一个linux下批处理的代码
DATA_DIR=/home/liupan/.navinsight/data/dataset_rec SHELL_DIR=/home/liupan/workspace/nvi_postprocessi ...
- 爱上MVC~业务层刻意抛出异常,全局异常的捕获它并按格式返回
回到目录 对于业务层的程序的致命错误,我们一直的做法就是直接抛出指定的异常,让程序去终断,这种做法是对的,因为如果一个业务出现了致命的阻塞的问题,就没有必要再向上一层一层的返回了,但这时有个问题,直接 ...
- 对象拷贝 - 优雅的解决方案 Mapstruct
MapStruct GitHub 访问地址 : https://github.com/mapstruct/mapstruct/ 使用例子 : https://github.com/mapstruct/ ...
- AngularJs在ng-click函数中如何获取代表当前元素的DOM对象
<!DOCTYPE html> <html> <head> <title></title> <script src="lib ...
- Oracle 搭建Node.js开发环境
先决条件 安装oralce客户端驱动. 安装node.js. 创建项目 安装oracledb模块 $npm install oracledb 如果失败了,你可能要爬墙. 参考package ...
- Java学习笔记--继承和多态(上)
1.通过继承来开发超类(superclass) 2.使用super 关键词唤起超类的构造方法 3.在超类中覆盖方法 4.区分override和overload 5.在Object类中探索toStrin ...
- Ubuntu上安装Samba服务器实现家庭共享
如何在Ubuntu上安装Samba服务器 大多数Linux发行版都包含Samba. 要在Ubuntu上安装Samba,只需运行: sudo apt install samba 要检查您的Samba版本 ...