Swiper轮播图
今天咱们来说一下.Swiper轮播图.
超级简单的:
翠花,上代码:
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Swiper demo</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> | |
| <!-- Link Swiper's CSS --> | |
| <link rel="stylesheet" href="../dist/css/swiper.min.css"> | |
| <!-- Demo styles --> | |
| <style> | |
| html, body { | |
| position: relative; | |
| height: 100%; | |
| } | |
| body { | |
| background: #eee; | |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
| font-size: 14px; | |
| color:#000; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .swiper-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .swiper-slide { | |
| text-align: center; | |
| font-size: 18px; | |
| background: #fff; | |
| /* Center slide text vertically */ | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -ms-flex-pack: center; | |
| -webkit-justify-content: center; | |
| justify-content: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| -webkit-align-items: center; | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Swiper --> | |
| <div class="swiper-container"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide">Slide 1</div> | |
| <div class="swiper-slide">Slide 2</div> | |
| <div class="swiper-slide">Slide 3</div> | |
| <div class="swiper-slide">Slide 4</div> | |
| <div class="swiper-slide">Slide 5</div> | |
| <div class="swiper-slide">Slide 6</div> | |
| <div class="swiper-slide">Slide 7</div> | |
| <div class="swiper-slide">Slide 8</div> | |
| <div class="swiper-slide">Slide 9</div> | |
| <div class="swiper-slide">Slide 10</div> | |
| </div> | |
| <!-- Add Pagination --> | |
| <div class="swiper-pagination"></div> | |
| </div> | |
| <!-- Swiper JS --> | |
| <script src="../dist/js/swiper.min.js"></script> | |
| <!-- Initialize Swiper --> | |
| <script> | |
|
var swiper = new Swiper('.swiper-container', { //小白点 |
|
| pagination: '.swiper-pagination', | |
| paginationClickable: true | |
| }); | |
| </script> | |
| </body> | |
| </html> |
- 最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!
Swiper轮播图的更多相关文章
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- swiper 轮播图，拖动之后继续轮播
在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
- swiper轮播图（逆向自动切换类似于无限循环）
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
随机推荐
- jpetStore 学习总结(1)
最近学习了Springmvc4,对官方的例子jpetStore进行了分析研究,在官方网站下载spring-framework-2.5.6.SEC03,其中samples文件夹里就有jpetstore的 ...
- 嵌入式C语言自我修养 05：零长度数组
5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...
- python里有意思的文件查找glob模块
python标准库之glob介绍 glob 文件名模式匹配,不用遍历整个目录判断每个文件是不是符合. 1.通配符 星号(*)匹配零个或多个字符 import glob for name in glob ...
- Django-工程搭建
-----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 2.安装django pip install django==1.11.11 ...
- P3348 [ZJOI2016]大森林(Link-cut-tree)
传送门 题解 题面大意: \(0.\)区间加节点 \(1.\)区间换根 \(2.\)单点询问距离 如果没有\(1\)操作,因为区间加节点都是加在下面,所以我们可以直接把\(n\)棵树压成一棵树,直接询 ...
- 插播一条 QQ头像无法正常显示问题
问题背景 不知道啥什么,QQ群的头像有些显示不全直接是默认的头像.想一想最近也没做啥,怎么就出问题了. 后来想一想,大概是个人文件夹的文件出问题了 解决办法 好友头像显示问题的删除 MiscHead. ...
- javac的Resolve类解读
方法1:isInitializer() /** An environment is an "initializer" if it is a constructor or * an ...
- orcale 之游标的属性
无论是显式游标还是隐式游标都会有四个属性分别是:%ISOPEN.%FOUND.%NOTFOUND.%ROWCOUNT 下面我们分别对着几种属性进行分析. %FOUND 该属性表示当前游标是否指向有效的 ...
- TCP/IP协议的三次握手及实现原理
TCP/IP是很多的不同的协议组成,实际上是一个协议组,TCP用户数据报表协议(也称作TCP传输控制协议,Transport Control Protocol.可靠的主机到主机层协议.这里要先强调一下 ...
- oracle:存储过程和触发器
存储过程(stored procedure) :可以看作带名字的pl/sql程序块:通过名字调用执行:可以带参数或不带参数. 触发器(trigger):通过事件触发执行,可看成特殊类型的存储过程. 下 ...