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 ...

随机推荐

MySql 申明变量以及赋值
sql server中变量要先申明后赋值: 局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的): 申明局部变量语法:declare @变量名数据类型:例如:declare ...
[SQL]获取所有数据库名、获取数据库中表名、获取表中的字段名
--()获取所有数据库名: Select Name FROM Master..SysDatabases order by Name --()获取所有表名 --XType=''U'':表示所有用户表; ...
ACM—最大连续子序列（HDOJ1003）
HDOJ链接 http://acm.hdu.edu.cn/showproblem.php?pid=1003 不了解题目的朋友可以先看一下题目,在这里就不再详细介绍了.(文章内容和解题思路不完全相同,方 ...
[CF 475D] CGCDSSQ (RMQ)
题目链接:http://codeforces.com/contest/475/problem/D 是昨天晚上的CF题目,题意是给定你n个数,问你所有子区间内的最小公约数是x的个数是多少问的康神,了解 ...
IOS开发-跨域访问DWR方法
用Phonegap做手机客户端,服务器用spring+DWR,需要在手机端访问服务器的方法,需要做以下配置,可以参见http://www.iteye.com/topic/337460: 服务器DWR配 ...
【转】交叉编译faac共享库
转自:http://blog.csdn.net/cjj198561/article/details/38382889 编译准备 1.代码下载在mac下面执行:wget http://download ...
实验比较python中的range和xrange
1 结论: 全用xrange,除非你需要使用返回的列表 2 实验一:性能对比实验环境:win7 ,64位系统 python2.7 import time StartTime=time.time() ...
Android的消息处理机制，handler，message，looper（一）
当应用程序启动时,Android首先会开启一个主线程(也就是UI线程),主线程为管理界面中的UI控件.在程序开发时,对于比较耗时的操作,通常会为其开辟一个单独的线程来执行,以尽可能减少用户的等待时间. ...
初探appium之元素定位（1）
无论是selenium还是appium,元素定位都是我们开始实现自动化面临的第一个问题.selenium还好,我们可以在浏览器的调试页面进行元素定位还是蛮方便的.那么appium怎么做呢? 我看到很多 ...
onenote网页版如何打开链接弄到客户端
1.网页登录https://onedrive.live.com 2.登录MS帐号 3.输入复制的分享链接,回车 4.点击编辑,在客户端编辑,弹出是否启动应用,点启动,等一段时间完成.

swiper 页面双向设置

swiper 页面双向设置的更多相关文章

随机推荐

热门专题