首先,我在这次学习的最大收益是,学习新框架、或者技术,先找官方文档比较好,那里的很全,你想要的基本都有的,如果没有那就是不支持喽。

然后简单概括下是怎么用的(比较谦虚,大家勿怪)

一 、找他的官方文档 https://swiperjs.com/demos/   点击 : Open in new window 接着右键V把源码直接放进去,在这里我就不搬过来了

二、把他的css、js 文件拷贝过来 

  https://swiperjs.com/package/css/swiper.min.css

  https://swiperjs.com/package/js/swiper.min.js

  现在你就可以看到效果了。

三、如果需要其他效果,例如:自动切换、切换特效,在他官方说明里找,只改js就可以了

  https://www.swiper.com.cn/api/start/new.html

  例如:自动切换 添加:

  

<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,//等同于以下设置
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
});
</script>

  

swiper 使用心得的更多相关文章

  1. swiper使用心得

    引入: <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.m ...

  2. 浅谈一下关于iscroll的使用心得

    因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验,浏览器自带是没有这种功能的,自己写的话兼容性可能会出大问题,要适配安卓的各种机型实在是难,所以我还是选择去使用移动端相对比较稳定的 ...

  3. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  4. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  5. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  6. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  8. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  9. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. flex 遇上white-space:nowrap的2种解决方法

    需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...

  2. kernel32.dll 这个系统模块

    详细解读:远程线程注入DLL到PC版微信 一.远程线程注入的原理 1.其基础是在 Windows 系统中,每个 .exe 文件在双击打开时都会加载 kernel32.dll 这个系统模块,该模块中有一 ...

  3. 安装部署FastDFS

    安装部署FastDFS 此篇博文是在安装好虚拟机和CentOS7的前提和转自以下几篇博客得来: 1.开启CentOS的网络连接:   1.1.网址:http://blog.csdn.net/white ...

  4. Centos7 安装部署 Airflow

    本人在centos7 的环境下部署,怎么在centos7 下配置静态 IP 关闭防火墙 以及安装jdk在这里不多赘述, centos7 配置静态ip可以参考:https://www.cnblogs.c ...

  5. 【转帖】我以为我对Kafka很了解,直到我看了这篇文章

    我以为我对Kafka很了解,直到我看了这篇文章 2019-08-12 18:05 https://www.sohu.com/a/333235171_463994?spm=smpc.author.fd- ...

  6. 【LOJ】#3030. 「JOISC 2019 Day1」考试

    LOJ#3030. 「JOISC 2019 Day1」考试 看起来求一个奇怪图形(两条和坐标轴平行的线被切掉了一个角)内包括的点个数 too naive! 首先熟练的转化求不被这个图形包含的个数 -- ...

  7. 洛谷 P4137 Rmq Problem/mex 题解

    题面 首先,由于本人太菜,不会莫队,所以先采用主席树的做法: 离散化是必须环节,否则动态开点线段数都救不了你: 我们对于每个元素i,插入到1~(i-1)的主席树中,第i颗线段树(权值线段树)对于一个区 ...

  8. less的引用及公共变量的抽离

    一.什么是less? less是什么自然不用多言,乃一个css预编译器,可以扩展css语言,添加功能如如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技 ...

  9. 11-Perl 运算符

    1.Perl 运算符运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5.Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符,比较运算符,逻辑运算符,赋值运算符,位 ...

  10. Windows10出现打开EXE应用程序错误

    运行部分EXE文件,弹出错误“该文件没有与之关联的程序来执行该操作 右键开始菜单, PowerShell(管理员)  也是一样 连安装程序Vs2017都无法启动,用了多种方法都不能搞定. 花了不少时间 ...