swiper 页面双向设置 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Swiper demo</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  7 
  8     <!-- Link Swiper's CSS -->
  9     <link rel="stylesheet" href="./css/swiper.min.css">
 10 
 11     <!-- Demo styles -->
 12     <style>
 13     html, body {
 14         position: relative;
 15         height: 100%;
 16     }
 17     body {
 18         background: #eee;
 19         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 20         font-size: 14px;
 21         color:#000;
 22         margin: 0;
 23         padding: 0;
 24     }
 25     .swiper-container {
 26         width: 100%;
 27         height: 100%;
 28     }
 29     .swiper-container2 {
 30         width: 100%;
 31         height: 100%;
 32     }
 33     .swiper-slide {
 34         text-align: center;
 35         font-size: 18px;
 36         background: #fff;
 37 
 38         /* Center slide text vertically */
 39         display: -webkit-box;
 40         display: -ms-flexbox;
 41         display: -webkit-flex;
 42         display: flex;
 43         -webkit-box-pack: center;
 44         -ms-flex-pack: center;
 45         -webkit-justify-content: center;
 46         justify-content: center;
 47         -webkit-box-align: center;
 48         -ms-flex-align: center;
 49         -webkit-align-items: center;
 50         align-items: center;
 51     }
 52     .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}
 53     .swiper-pagination2.swiper-pagination2-hidden{opacity:0}
 54     .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)}
 55     .swiper-container-vertical>.swiper-pagination2 .swiper-pagination-bullet{margin:5px 0;display:block}
 56     .swiper-container-horizontal>.swiper-pagination2{bottom:10px;left:0;width:100%}
 57     .swiper-container-horizontal>.swiper-pagination2 .swiper-pagination-bullet{margin:0 5px}
 58     </style>
 59 </head>
 60 <body>
 61     <!-- Swiper -->
 62     <div class="swiper-container">
 63         <div class="swiper-wrapper">
 64             <div class="swiper-slide">这是首页</div>
 65             <div class="swiper-slide">
 66                 <div class="swiper-container2">
 67                     <div class="swiper-wrapper">
 68                         <div class="swiper-slide">Slide 1</div>
 69                         <div class="swiper-slide">Slide 2</div>
 70                         <div class="swiper-slide">Slide 3</div>
 71                         <div class="swiper-slide">Slide 4</div>
 72                         <div class="swiper-slide">Slide 5</div>
 73                         <div class="swiper-slide">Slide 6</div>
 74                         <div class="swiper-slide">Slide 7</div>
 75                         <div class="swiper-slide">Slide 8</div>
 76                         <div class="swiper-slide">Slide 9</div>
 77                         <div class="swiper-slide">Slide 10</div>
 78                     </div>
 79                     <!-- Add Pagination -->
 80                     <div class="swiper-pagination2"></div>
 81                 </div>
 82             </div>
 83             <div class="swiper-slide">Slide 3</div>
 84             <div class="swiper-slide">Slide 4</div>
 85             <div class="swiper-slide">Slide 5</div>
 86             <div class="swiper-slide">Slide 6</div>
 87             <div class="swiper-slide">Slide 7</div>
 88             <div class="swiper-slide">Slide 8</div>
 89             <div class="swiper-slide">Slide 9</div>
 90             <div class="swiper-slide">Slide 10</div>
 91         </div>
 92         <!-- Add Pagination -->
 93         <div class="swiper-pagination"></div>
 94     </div>
 95 
 96     <!-- Swiper JS -->
 97     <script src="./js/swiper.min.js"></script>
 98 
 99     <!-- Initialize Swiper -->
100     <script>
101     var swiper = new Swiper('.swiper-container', {
102         pagination: '.swiper-pagination',
103         paginationClickable: true,
104         direction: 'vertical'
105     });
106     var swiper2 = new Swiper('.swiper-container2', {
107         pagination: '.swiper-pagination2',
108         paginationClickable: true,
109     });
110     </script>
111 </body>
112 </html>

 

posted @ 2015-08-18 16:47  DoAgain  阅读(845)  评论(0)    收藏  举报