vue-Swiper-awsome
<swiper :options="swiperOption">
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码
data(){
return{
swiperOption: {//swiper3
autoplay: 3000,
speed: 1000,
}
}
}
vue-Swiper-awsome的更多相关文章
- vue swiper上下无缝轮播
参考:https://www.jianshu.com/p/5e5e59065e9c 效果: index.html: <link href="https://cdn.bootcss.co ...
- vue swiper异步加载轮播图,并且懒加载
参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...
- vue swiper中的大坑
mounted() { var self = this; for (var i = 0; i < self.$refs.mySwiper.swiper.pagination.bullets.le ...
- vue swiper点击后返回不能自动播放
解决方法: 在返回时重新开启轮播 组件中: <swiper :options="swiperOption" ref="mySwiper" :class=& ...
- VUE swiper.js引用使用轮播图
<template> <div class="home"> <div class="swiper-container"> & ...
- swiper实现臭美app滑动效果
一.臭美app效果: 我的需求是这样,上面正常滑动,点击下面的小卡牌,上面的滑动区也随之切换到当前的点击态. 二.实现: css: 主要设置可见区域的几张卡牌的位置,注意的几个位置是,中间的激活态和左 ...
- [vue]组件最佳实战
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- vue轮播(完整详细版)
轮播组件vue <swiper :options="swiperOption" class='swiper-box'> <swiper-slide v-f ...
- 5.【nuxt起步】-swiper组件
接下来是一个比较常用,也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件,我这里就复用之前一个熟悉的, 1.新建component/banner.vue 刷新报错: 要 ...
- Vue.js开发去哪儿网WebApp
一.项目介绍 这个项目主要参考了去哪儿网的布局,完成了首页.城市选择页面.详情页面的开发. 首页:实现了多区域轮播的功能,以及多区域列表的展示: 城市选择页面:在这个页面实现了城市展示.城市搜索.城市 ...
随机推荐
- python 多线程共享全局变量的问题
多线程都是在同一个进程中运行的.因此在进程中的全局变量所有线程都是可共享的. 这就造成了一个问题,因为线程执行的顺序是无序的.有可能会造成数据错误. 直白理解:也就是多线程执行的时候,同时对一个全局变 ...
- 0. General-purpose tools (通用工具 8个)
http://en.wikipedia.org/wiki/Netcat这个简单的实用程序通过TCP或UDP网络连接读写数据. 它被设计为一个可靠的后端工具,可以直接或轻松地使用其他程序和脚本驱动. 同 ...
- 内网渗透 关于GPO
网上有很多讲内网渗透的文章,但看来看去还是一老外的博客给力,博客地址:www.harmj0y.net/blog,看完就明白这里面的很多思路都非常好. 做内网时,有时会碰到目标的机器开防火墙,所有端口基 ...
- ubuntu 主题和zsh终端
ubuntu 主题和zsh终端 1) sudo apt-get install unity-tweak-tool sudo add-apt-repository ppa:noobslab/theme ...
- virtualenvwrappers pipreqs 踩坑
virtualenvwrappers 1.安装 pip install virtualenvwrapper 在~/.bashrc 中写入 export WORKON_HOME=~/.virtualen ...
- Open Distro for Elasticsearch – How Different Is It?
转自:https://logz.io/blog/open-distro-for-elasticsearch Last month, AWS announced an initiative called ...
- JS 实现Table相同行的单元格自动合并示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- Freescale MKL16Z1288VF4 芯片调试接口
WDOG监视内部系统操作,并在发生故障时强制复位.它可以运行在一个独立的1 kHz低功率振荡器,具有可编程刷新窗口,以检测程序流或系统频率的偏差. 看门狗计时器保持一个时间在系统上运行,并重置它,以防 ...
- postgresql 游标,函数,存储过程使用例子
CREATE OR REPLACE FUNCTION cursor_demo() RETURNS refcursor AS --返回一个游标 $BODY$ declare --定义变量及游标 unbo ...
- aspnetcore2.1 部署到docker (访问出现404)
Dockerfile FROM microsoft/dotnet:2.1-aspnetcore-runtime WORKDIR /app COPY ./publish . ENTRYPOINT [&q ...