标签：
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>
标签：
原文地址：http://www.cnblogs.com/lv-lu/p/4739858.html
