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 ...
随机推荐
- UITableView 头部效果/放大/移动跟随效果
[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...
- Webpack学习错误解决笔记
错误1:在用npm install 安装模块时,时常会出现没有以下类似的错误 解决方法:右键点击node_modules文件夹,选取属性,将文件夹只读选项去除 错误2:在学习到清理/dist文件夹这块 ...
- python 报错: Dog() takes no arguments
后来上网找了一下.发现是 构造方法 __init__ 两边的下划线是双下划线,我写的是单下划线. 读书不认真,该打. 特此记录.
- [LibreOJ #2341]【WC2018】即时战略【交互】【LCT】
Description 有一棵n个点的结构未知的树,初始时只有1号点是已被访问的. 你可以调用交互库的询问函数explore(x,y),其中x是已访问的点,y是任意点. 它会返回x向y方向走第一步的点 ...
- Prufer序列与树的计数(坑)
\(prufer\)序列: 无根树转\(prufer\)序列: 不断找编号最小的叶子节点,删掉并在序列中加入他相连的节点. \(prufer\)转无根树: 找到在目前\(prufer\)序列中未出现且 ...
- netty用户指南
Netty用户指南 一.前言 1.问题 当今世界我们需要使用通用的软件或库与其他组件进行通信,例如使用HTTP客户端从服务器中获取信息,或通过网络服务调用一个远程的方法.然而通用的协议及其实现通常不具 ...
- OpenERP button 的三种类型
1. workflow: 默认是这种类型,如果你需要创建工作流类型的button使用这个 2. object: 调用function的类型,如果你需要调用py文件中同名的方法,使用该类型. 3.act ...
- Spring Boot Starters是什么?
版权声明:该文转自: http://www.nosuchfield.com/2017/10/15/Spring-Boot-Starters/.版权归原创作者,在此对原作者的付出表示感谢! starte ...
- pull强制覆盖本地
今天我总结的是在项目中经常用到的Git命令,上传和下拉文件. 当然在进行上传和下拉操作之前,你首先要做的就是将本地和Git库连接起来. 连接命令: git remote add origin + 你G ...
- php实现函数可变参数列表
使用func_get_args().func_num_args().func_get_arg() 可以构造一个可变参数列表的函数. 首先大致介绍以上三个函数. (1)array func_get_ar ...