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="./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-container2 {
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;
}
.swiper-pagination2{position:absolute;text-align:center;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}
.swiper-pagination2.swiper-pagination2-hidden{opacity:0}
.swiper-container-vertical>.swiper-pagination2{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
.swiper-container-vertical>.swiper-pagination2 .swiper-pagination-bullet{margin:5px 0;display:block}
.swiper-container-horizontal>.swiper-pagination2{bottom:10px;left:0;width:100%}
.swiper-container-horizontal>.swiper-pagination2 .swiper-pagination-bullet{margin:0 5px}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">这是首页</div>
<div class="swiper-slide">
<div class="swiper-container2">
<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-pagination2"></div>
</div>
</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="./js/swiper.min.js"></script> <!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical'
});
var swiper2 = new Swiper('.swiper-container2', {
pagination: '.swiper-pagination2',
paginationClickable: true,
});
</script>
</body>
</html>
swiper 页面双向设置的更多相关文章
- PHP 404页面/如何设置404页面/URL静态化/URL伪静态化
php中如何设置404页面及其他错误页面 首先在项目根目录下新建文件,文件名为" .htaccess " 在该文件中写入一下配置项: ErrorDocument 404 /404. ...
- ASP.NET 页面双向静态化
而我们预期的结果应该如下图,实际只请求两次. 用301重定向可以解决该循环请求产生的问题. OK, let's begin. 本文的Demo和Source是基于上一篇的,如果下面的一些文件或文件夹没有 ...
- Axure快速原型教程02--创建页面和设置界面
目录 Axure快速原型教程02--创建页面和设置界面 Axure快速原型教程01--原型说明下载和安装 首先,在左侧的面板中,我们发现有一个叫sitemap的面板,这个面板就是我们的一个个的页面了, ...
- 为了安全请不要随意在页面中设置validateRequest="false"
为了安全请不要随意在页面中设置validateRequest="false" 分类: ASP.NET2009-04-12 17:24 531人阅读 评论(0) 收藏 举报 asp. ...
- Mvc4页面缓存设置Cookie导致缓存失效
[OutputCache(Duration = 60, VaryByParam = "none")] public ActionResult Index() ...
- .htaccess文件的详解以及404页面的设置
打开记事本,写入以下代码: ErrorDocument 404 /404.html保存成.htaccess文件上传到网站的根目录. /404.html是目录名和文件名,可以改成自己的名字.QUOTE: ...
- swiper去除滑动设置
有时候使用swiper并不想让它滑动,怎么设置呢? 1.noSwiping设为true 2.在slide上(或其他元素)增加类名'swiper-no-swiping',使该slide无法拖动. 案例: ...
- ThinkPHP 3.1 404页面的设置
在很多网站中都会有使用404页面的时候,在ThinkPHP框架中该如何设置呢,接下来我介绍其中一种方法 1.首先要在Lib/Action 下建立EmptyAction.class.php模块内容如下: ...
- Jquery 在子页面上设置父页面元素的值
使用情景:因为我父页面上有用art.dialog,而子页面上有项目中的框架弹出方法跟art.dialog冲突,不能使用art.dialog自带的方法传值, 所以只好用一种简单粗暴的方法来设置. var ...
随机推荐
- Address already in use: JVM_Bind<null>:8080错误的解决办法
myEclipse在启动tomcat时,有时候会出现8080端口被占用的情况, 提示这个错误:Address already in use: JVM_Bind<null>:8080. 按照 ...
- Ext TreeGrid提交修改过的数据
本打算将整个treestore的数据提交到服务器,但找来找去没有找到好的方法,在翻api的时候发现了getUpdatedRecords()方法,拿来一试,试出此方法可以拿到被修改过的record so ...
- [HDU 4585] Shaolin (map应用)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4585 题目大意:不停的插入数字,问你跟他相距近的ID号.如果有两个距离相近的话选择小的那个. 用map ...
- mysql start server faild
可能没卸载干净...在安装mysql数据库时,如果重新安装,很容易遇见apply security setting error,即在配置mysql启动服务时,在启动apply security set ...
- Nginx 内置全局变量
Nginx在使用过程中,有不少的内置全局变量可以用做条件判断和编程控制,本文总结一些已知的指令,以供参考. $arg_PARAMETER 这个变量包含在查询字符串时GET请求PARAMETER的值. ...
- python3 split( ) not enough values to unpack(expceted 2, got 1)
在运行一个小脚本时,脚本从一文本文件读取数据,事实上这个文件只有一行'count:2',并取到这个2,将其转成数字.但运行,总是报错. 代码如下: with open('count.txt', 'r' ...
- OC基础(4)
NSString 类介绍及用法 结构体成员变量 对象和方法之间的关系 对象作为方法的参数连续传递 *:first-child { margin-top: 0 !important; } body &g ...
- iOS 5.0 后UIViewController新增：willMoveToParentViewController和didMoveToParentViewCon［转］
在iOS 5.0以前,我们在一个UIViewController中这样组织相关的UIView 在以前,一个UIViewController的View可能有很多小的子view.这些子view很多时候 ...
- Bootstrap 3 How-To #1 下载与配置
Bootstrap 3 发布了,通过简单的几步,我们就可以使用 Bootstrap 的样式表,图标,以及 javascript 来配置一个简单的站点. 准备 Bootstrap 不仅仅是一个代码集,还 ...
- 剑指Offer：面试题3——二维数组中的查找（java实现）
问题描述:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路:取数组中的元素与 ...