标题: Swipe轮播程序插件 [打印本页]
作者: 1359947789    时间: 2017-4-20 17:33
标题: Swipe轮播程序插件

  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="./dist/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: 400px;
  28.                 margin-left:auto;
  29.                 margin-right: auto;
  30.                 margin-top: 50px;
  31.             }
  32.             .swiper-slide {
  33.                 text-align: center;
  34.                 
  35.                 /* Center slide text vertically */
  36.                 display: -webkit-box;
  37.                 display: -ms-flexbox;
  38.                 display: -webkit-flex;
  39.                 display: flex;
  40.                 -webkit-box-pack: center;
  41.                 -ms-flex-pack: center;
  42.                 -webkit-justify-content: center;
  43.                 justify-content: center;
  44.                 -webkit-box-align: center;
  45.                 -ms-flex-align: center;
  46.                 -webkit-align-items: center;
  47.                 align-items: center;
  48.             }
  49.             .swiper-pagination-bullet-active{
  50.                 background:#ed711b;
  51.             }
  52.             </style>
  53.         </head>
  54.         <body>
  55.             <!-- Swiper -->
  56.             <div class="swiper-container">
  57.                 <div class="swiper-wrapper">
  58.                     <div class="swiper-slide" style="background: url(./images/Picture_2016881342444007.png) no-repeat center center;background-size: cover;"></div>
  59.                     <div class="swiper-slide" style="background: url(./images/Picture_2016881342107866.png) no-repeat center center;background-size: cover;"></div>
  60.                     <div class="swiper-slide" style="background: url(./images/Picture_201683174046909.png) no-repeat center center;background-size: cover;"></div>
  61.                 </div>
  62.                 <!-- Add Pagination -->
  63.                 <div class="swiper-pagination"></div>
  64.                 <!-- Add Arrows -->
  65.                 <div class="swiper-button-next"></div>
  66.                 <div class="swiper-button-prev"></div>
  67.             </div>
  68.        
  69.             <!-- Swiper JS -->
  70.             <script src="./dist/js/swiper.min.js"></script>
  71.        
  72.             <!-- Initialize Swiper -->
  73.             <script>
  74.             var swiper = new Swiper('.swiper-container', {
  75.                 pagination: '.swiper-pagination',
  76.                 nextButton: '.swiper-button-next',
  77.                 prevButton: '.swiper-button-prev',
  78.                 paginationClickable: true,
  79.                 spaceBetween: 30,
  80.                 centeredSlides: true,
  81.                 autoplay: 2500,
  82.                 autoplayDisableOnInteraction: false
  83.             });
  84.             </script>
  85.         </body>
  86.         </html>
复制代码

Swiper-3.4.2.rar

1.69 MB, 下载次数: 3, 下载积分: 黑币 -5

swipe轮播插件



欢迎光临 (http://www.51hei.com/bbs/) Powered by Discuz! X3.1