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 ...
随机推荐
- Delphi的Socket编程步骤(repulish)
转贴自:http://topic.csdn.net/t/20010727/16/212155.html ClientSocket 和ServerSocket几个重要的属性: 1.client和se ...
- [kuangbin带你飞]专题二十 斜率DP
ID Origin Title 20 / 60 Problem A HDU 3507 Print Article 13 / 19 Problem B HDU 2829 Lawr ...
- 山东省第六届ACM省赛
A.Nias and Tug-of-War(sort排序) B.Lowest Unique Price(set+map) C.Game!(博弈) D.Stars E.BIGZHUGOD and His ...
- Mingyang.net：org.springframework.context.annotation.ConflictingBeanDefinitionException
org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean ...
- wap资费页面
移动网关 CMWAP 返回vnd.wap.wml 用CMWAP接入点发一个http的请求时,移动的10.0.0.172这个代理网关会回一个确认页面,中国特色.处理的办法是检测到Content-type ...
- 转载：LoadRunner11-遇到问题及解决办法
转自:http://4951507.blog.51cto.com/4941507/1108733 1.LoadRunner超时错误:在录制Web服务器端,如果超过120秒服务器协议脚本回放时超时情况经 ...
- AngularJs $http.post 数据后台获取不到数据问题 的解决过程
第一次使用 AngularJs 的 $http 模块的时候,遇到过后台获取不到前台提交数据的问题,检查代码没有发现问题,先上代码. js 代码 angular.module("newsApp ...
- 解决数据标准及质量AppScan（测试）安全性问题相关方法
1. SQL注入文件写入(需要用户验证) 解决办法:通过建立过滤器方法,对所有用户输入信息进行清理过滤.通过清理过滤用户输入所包含的危险字符,便可能防止恶意的用户导致应用程序执行计划外的任务,例如:启 ...
- PAT1069. The Black Hole of Numbers
//这是到水题,之前因为四位数的原因一直不能A,看了别人的程序,才明白,不够四位的时候没考虑到,坑啊.....脸打肿 #include<cstdio>#include<algorit ...
- js设计模式-建造者模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...