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

随机推荐

Eclipse 中使用 ctrl 无法追踪函数的问题
Eclipse 中使用 ctrl 无法追踪函数的问题 Eclipse 项目中应该有 .buildpath , .project 两个文件,如果 Eclipse 中使用 ctrl 无法追踪函数, 第一步 ...
poj 1016 Numbers That Count
点击打开链接 Numbers That Count Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17922 Accep ...
hdu 1255 覆盖的面积（线段树面积交）（待整理）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1255 Description 给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积. In ...
C - Fractal(3.4.1)
Description A fractal is an object or quantity that displays self-similarity, in a somewhat technica ...
Party Games
Party Games You've been invited to a party. The host wants to divide the guests into 2 teams for par ...
基于Web的企业网和互联网的信息和应用（ 1194.22 ）
基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194 ...
二叉树之AVL树的平衡实现(递归与非递归)
这篇文章用来复习AVL的平衡操作,分别会介绍其旋转操作的递归与非递归实现,但是最终带有插入示例的版本会以递归呈现. 下面这张图绘制了需要旋转操作的8种情况.(我要给做这张图的兄弟一个赞)后面会给出这八 ...
nginx 编译模块说明
--prefix= <path> - Nginx安装路径.如果没有指定,默认为 /usr/local/nginx. --sbin-path= <path> - Nginx可执行 ...
vb 取得桌面路径
txtPath.Text = System.Environment.GetFolderPath(Environment.SpecialFolder.Desktop)
c# winform 读取图片列表
PropertyInfo[] poroInfo = typeof(Resources).GetProperties(System.Reflection.BindingFlags.NonPublic ...

swiper 页面双向设置

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

随机推荐

热门专题