swiper 一个页面多个滑块 多个分页器样式 完整案例分享

朋友问我这是什么 对大家有什么用吗  我说swiper发展到3.2 已经大大地进军移动端

,至于它的用处可谓是造福万民啊
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>swiper 一个页面多个滑块 多个分页器 完整案例分享</title>
  6. <style>
  7. /* Demo Styles */
  8. body {
  9. margin: 0;
  10. font-family: Arial, Helvetica, sans-serif;
  11. font-size: 13px;
  12. line-height: 1.5;
  13. }
  14. /* -----------
  15. 提炼 idangerous.swiper.css
  16. ------------*/
  17. .swiper-container {
  18. margin:0 auto;
  19. position:relative;
  20. overflow:hidden;
  21. -webkit-backface-visibility:hidden;
  22. -moz-backface-visibility:hidden;
  23. -ms-backface-visibility:hidden;
  24. -o-backface-visibility:hidden;
  25. backface-visibility:hidden;/* Fix of Webkit flickering */
  26. z-index:1;
  27. }
  28. .swiper-wrapper {
  29. position:relative;
  30. width:100%;
  31. -webkit-transition-property:-webkit-transform, left, top;
  32. -webkit-transition-duration:0s;
  33. -webkit-transform:translate3d(0px,0,0);
  34. -webkit-transition-timing-function:ease;
  35. -moz-transition-property:-moz-transform, left, top;
  36. -moz-transition-duration:0s;
  37. -moz-transform:translate3d(0px,0,0);
  38. -moz-transition-timing-function:ease;
  39. -o-transition-property:-o-transform, left, top;
  40. -o-transition-duration:0s;
  41. -o-transform:translate3d(0px,0,0);
  42. -o-transition-timing-function:ease;
  43. -o-transform:translate(0px,0px);
  44. -ms-transition-property:-ms-transform, left, top;
  45. -ms-transition-duration:0s;
  46. -ms-transform:translate3d(0px,0,0);
  47. -ms-transition-timing-function:ease;
  48. transition-property:transform, left, top;
  49. transition-duration:0s;
  50. transform:translate3d(0px,0,0);
  51. transition-timing-function:ease;
  52. -webkit-box-sizing: content-box;
  53. -moz-box-sizing: content-box;
  54. box-sizing: content-box;
  55. }
  56. .swiper-slide {
  57. float: left;
  58. -webkit-box-sizing: content-box;
  59. -moz-box-sizing: content-box;
  60. box-sizing: content-box;
  61. }
  62. /* -----------
  63. 提炼 idangerous.swiper.css
  64. ------------*/
  65. .swiper-container {
  66. width: 660px;
  67. height: 250px;
  68. color: #fff;
  69. text-align: center;
  70. }
  71. .red-slide {
  72. background: #ca4040;
  73. }
  74. .blue-slide {
  75. background: #4390ee;
  76. }
  77. .orange-slide {
  78. background: #ff8604;
  79. }
  80. .green-slide {
  81. background: #49a430;
  82. }
  83. .pink-slide {
  84. background: #973e76;
  85. }
  86. .swiper-slide .title {
  87. font-style: italic;
  88. font-size: 42px;
  89. margin-top: 80px;
  90. margin-bottom: 0;
  91. line-height: 45px;
  92. }
  93. .pagination-0 {
  94. position: absolute;
  95. z-index: 20;
  96. left: 10px;
  97. bottom: 10px;
  98. }
  99. .pagination-0 .swiper-pagination-switch {
  100. display: inline-block;
  101. width: 8px;
  102. height: 8px;
  103. border-radius: 8px;
  104. background: #222;
  105. margin-right: 5px;
  106. opacity: 0.8;
  107. border: 1px solid #fff;
  108. cursor: pointer;
  109. }
  110. .pagination-0 .swiper-active-switch {
  111. background: #fff;
  112. }
  113. .pagination-1{
  114. position: absolute;
  115. text-align: center;
  116. left: 0;
  117. bottom: 0;
  118. width: 100%;
  119. line-height: 40px;
  120. height: 40px;
  121. z-index: 20;
  122. bottom: auto;
  123. top: 200px;
  124. margin-left: 250px;
  125. }
  126. /*
  127. .pagination-1 span {
  128. background: #001;
  129. border: 1px solid #00f;
  130. }*/
  131. .pagination-1 .swiper-pagination-switch
  132. {
  133. vertical-align: middle;
  134. display: inline-block;
  135. width: 14px;
  136. height: 14px;
  137. background: #000;
  138. cursor: pointer;
  139. -webkit-transition: 300ms;
  140. -moz-transition: 300ms;
  141. -ms-transition: 300ms;
  142. -o-transition: 300ms;
  143. transition: 300ms;
  144. margin: 0 1px;
  145. }
  146. .pagination-1 .swiper-active-switch
  147. {
  148. background: #FF8;
  149. }
  150. /*
  151. .pagination-1 .swiper-visible-switch
  152. {
  153. background: #ff8;
  154. }*/
  155. </style>
  156. </head>
  157. <body>
  158. <div class="swiper-container swiper-container0">
  159. <div class="swiper-wrapper">
  160. <div class="swiper-slide red-slide">
  161. <div class="title">标题 1</div>
  162. </div>
  163. <div class="swiper-slide blue-slide">
  164. <div class="title">标题 2</div>
  165. </div>
  166. <div class="swiper-slide orange-slide">
  167. <div class="title">标题 3</div>
  168. </div>
  169. <div class="swiper-slide green-slide">
  170. <div class="title">标题 4</div>
  171. </div>
  172. <div class="swiper-slide pink-slide">
  173. <div class="title">标题 5</div>
  174. </div>
  175. <div class="swiper-slide red-slide">
  176. <div class="title">标题 6</div>
  177. </div>
  178. <div class="swiper-slide blue-slide">
  179. <div class="title">标题 7</div>
  180. </div>
  181. <div class="swiper-slide orange-slide">
  182. <div class="title">标题 8</div>
  183. </div>
  184. </div>
  185. <div class="pagination-0"></div>
  186. </div>
  187. <br /><hr><br />
  188. <div class="swiper-container swiper-container1">
  189. <div class="swiper-wrapper">
  190. <div class="swiper-slide red-slide">
  191. <div class="title">标题 1</div>
  192. </div>
  193. <div class="swiper-slide blue-slide">
  194. <div class="title">标题 2</div>
  195. </div>
  196. <div class="swiper-slide orange-slide">
  197. <div class="title">标题 3</div>
  198. </div>
  199. <div class="swiper-slide green-slide">
  200. <div class="title">标题 4</div>
  201. </div>
  202. <div class="swiper-slide pink-slide">
  203. <div class="title">标题 5</div>
  204. </div>
  205. <div class="swiper-slide red-slide">
  206. <div class="title">标题 6</div>
  207. </div>
  208. <div class="swiper-slide blue-slide">
  209. <div class="title">标题 7</div>
  210. </div>
  211. <div class="swiper-slide orange-slide">
  212. <div class="title">标题 8</div>
  213. </div>
  214. </div>
  215. <div class="pagination-1"></div>
  216. </div>
  217. <script src="http://7xopok.dl1.z0.glb.clouddn.com/Swiper/js/idangerous.swiper.min.js"></script>
  218. <script src="http://7xopok.dl1.z0.glb.clouddn.com/Swiper/js/jquery-1.10.1.min.js"></script>
  219. <script>
  220. var mySwiper = new Swiper('.swiper-container0',{
  221. pagination: '.pagination-0',
  222. paginationClickable: true,
  223. slidesPerView: 3
  224. })
  225. var swiperNested1 = new Swiper('.swiper-container1',{
  226. pagination: '.pagination-1',
  227. paginationClickable: true,
  228. slidesPerView: 3
  229. })
  230. </script>
  231. </body>
  232. </html>
以上代码是 一个页面多个swiper 独立样式

非凡网 博客

我只是帮你筛选价值。

你也许喜欢

发表评论