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

随机推荐

Python之几个技巧特点
今天偶然看到一篇文章<你可能不知道的30个Python语言的提点技巧>,虽然做python有几年了,但中间还是好多不知道或没想到,特在这里做下摘抄. 原文地址: http://soft.c ...
protoc的protoc-gen-grpc-java插件
编译 protoc-gen-grpc-java插件的文档在: https://github.com/grpc/grpc-java/tree/master/compiler 编译的步骤: Chang ...
关于 profile文件(转)
登录shell执行了两个特殊文件, 1个是:\etc\profile, 这个文件由系统管理员设置,通常做一些如检查是否有邮件,设置默认的创建文件的掩码,给某些表转到处变量赋值,已经任何管理员希望每当用 ...
Android开发-API指南-<category>
<category> 英文原文:http://developer.android.com/guide/topics/manifest/category-element.html 采集(更新 ...
[AFUI]App Framework Plugins
---------------------------------------------------------------------------------------------------- ...
C++ 什么是句柄？为什么会有句柄？HANDLE
出处:http://www.cppblog.com/mymsdn/archive/2009/02/19/handle-in-windows.html 从广义上,能够从一个数值拎起一大堆数据的东西都可以 ...
MSP430F149学习之路——UART
代码一: #include <msp430x14x.h> void int_clk() { BCSCTL1 &= ~XT2OFF; BCSCTL2 |= SELM_2 + SELS ...
用　vs2013 创建　windows service 程序
windows services 是运行在后台的服务程序,可以用 vs2013 来创建,创建的步骤如下: 1.打开 vs2013 , Files -->New Project --> wi ...
vs 中无法加载项目的解决方案
有时,我们在vs 中打开工程项目时,会出现这样的错误,项目无法加载,解决方案如下: 错误提示: 解决方案: 在vs 中单独打开工程配置文件 ,然后修改配置,将红圈处的内容注释掉: 重新加载项目:
如何用ASPxTreeView建立三级树(显示及数据绑定)
示例如图: //设置treeviw默认为第一个菜单打开if (ASPxTreeView1.SelectedNode == null)ASPxTreeView1.SelectedNode = ASPxT ...

swiper 页面双向设置

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

随机推荐

热门专题