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 ...
随机推荐
- VisualVM连接远程Java进程
jstatd是一个RMI(Remove Method Invocation)的server应用,用于监控jvm的创建和结束,并且提供接口让监控工具(如VisualVM)可以远程连接到本机的jvms . ...
- python 迭代器、生成器、装饰器
一,迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,知道所有的元素被访问完结束.迭代器只能往前不会后退. 特点: 访问者不需要关心迭代器内部的结构,仅需通过next()方 ...
- jsp页面List迭代
1.行迭代 <tbody> <c:choose> <c:when test="${not empty result}"> &l ...
- js的传值，table中tr的遍历，js中动态创建数组
1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...
- OC基础(9)
OC中的私有方法 @property基本概念 @synthesize基本概念 @property增强 @property修饰符 *:first-child { margin-top: 0 !impor ...
- 直接使用editbox.clear()清空时，有时会无法清除完全，此时有清空文本框的另一种方法
editbox = driver.find_element_by_id("id") editbox.click() content = editbox.get_attribute( ...
- sublime Text及package control的安装
1.下载并安装sublime Text2http://www.baidu.com/s?wd=sublime&rsv_spt=1&issp=1&f=8&rsv_bp=0& ...
- 二模10day2解题报告
T1.最多因子数(divisors) 给出范围l,r求其中约数和最大的最小整数. 非常深井冰的题目:如果特判加暴力的话分数低的可怜 AC做法要用到分解质因数和线性筛(这俩好写),然而,一个一个枚举还是 ...
- 图形化Cisco设备管理实践（附安装配置视频）
图形化Cisco设备管理实践 Ciscoworks 2000是Cisco公司推出的基于SNMP协议的网络管理系统,通过它网络管理人员可以方便快捷地完成设备的配置.管理.监控和故障分析等任务, Cisc ...
- 部署Ossim
650) this.width=650;" title="29-1.jpg" alt="095310750.jpg" src="http:/ ...