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

随机推荐

C# 自定义事件（EventArgs）
1,自定义事件: public class TextChangeEventArgs : EventArgs { private string message; public TextC ...
Hibernate 只获取外键id，不获取内容
Hibernate,jpa注解映射中 A多对一B A的表中有B的外键. 如果想只获取A表中的B的外键而不想发送查询B的sql语句. 那么: @ManyToOne(fetch=FetchType.LAZ ...
Js字符串与十六进制的相互转换
开发过程中,字符串与十六进.二进制之间的相互转换常常会用到,尤其是涉及到中文的加密时,就需要把中文转换为十六进制.下面说说具体的转换方法. 1.字符串转换为十六进制主要使用 charCodeAt() ...
项目积累——jQuery
初始化时为文本框赋值,聚焦后清空内容 $(function(){ $("#buyDate").val("格式:2014-01-01"); $("#bu ...
regulator
http://blog.sina.com.cn/s/blog_5e99b41e0101a3ng.html http://blog.sina.com.cn/s/blog_694348b00100n3ip ...
为什么要使用Spark？
现有的hadoop生态系统中存在的问题 1)使用mapreduce进行批量离线分析: 2)使用hive进行历史数据的分析: 3)使用hbase进行实时数据的查询: 4)使用storm进行实时的流处理: ...
android 数据存储----文件方式总结
在android中的文件放在不同位置,它们的读取方式也有一些不同. 本文对android中对资源文件的读取.数据区文件的读取.SD卡文件的读取及RandomAccessFile的方式和方法进行了整理. ...
测试方法---"SFDIPOT"
SFDIPOT方法是快速测试的一种方法,可以帮助你快速理清测试点. 我粗略地想了一下,凡是面试时我遇到过的奇葩的让我测一个电梯.雨伞.电话.水杯.测一个奇怪的东西的面试题上都能用. 然后嘛,日常工作中 ...
svn 终端命令
你可以仅仅删除冲突的文件并且提交,但是svn resolved除了删除冲突文件,还修正了一些记录在工作拷贝管理区域的记录数据,所以我们推荐你使用这个命令. 恢复本地修改 svn revert [-- ...
【LeetCode】3.Longest Substring Without Repeating Characters 最长无重复子串
题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

swiper 页面双向设置

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

随机推荐

热门专题