swiper.com.cn使用方法

時間 2019-11-12

標籤 swiper.com.cn swiper com 使用方法简体版

原文原文鏈接

html和css文件都在這了，複製就能用：javascript

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>焦點圖swiper</title>
	<link rel="stylesheet" href="swiper/swiper-3.3.1.min.css">
	<link rel="stylesheet" href="輪播圖swiper.css">

	<style type="text/css">
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        margin: 0 auto;
    }
    .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-slide img{
 	width: 100%;
 }
    </style>

</head>
<body>
	<div class="swiper-container"><!--swiper容器[能夠隨意更改該容器的樣式-->  
	    <div class="swiper-wrapper">
	        <div class="swiper-slide"><img src="img/700kh.jpg"></div>
	        <div class="swiper-slide"><img src="img/APICloud_Banner_for_Gizwits.png" ></div>
	        <div class="swiper-slide"><img src="img/banner-1_SJYPmCp.jpg" ></div>
	    </div>
	    <!-- 若是須要分頁器 -->
	    <div class="swiper-pagination" ></div><!--分頁器-->、  	    
	    <!-- 若是須要導航按鈕 -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	</div>
<!-- 導航等組件能夠放在container以外 -->


	<script type="text/javascript" src="../ku/jquery-2.2.4.min.js"></script>
	<script src="swiper/swiper-3.3.1.min.js"></script>

	<script>        
  var mySwiper = new Swiper ('.swiper-container', {
     direction:"horizontal",/*橫向滑動*/  
     loop:true,/*造成環路（即：能夠從最後一張圖跳轉到第一張圖*/  
    
    // 若是須要分頁器(小點)
    pagination: '.swiper-pagination',
    paginationClickable: true,
    // paginationBulletRender: function (index, className) {
    //         return '<span class="' + className + '">' + (index + 1) + '</span>';
    //     },

    // 若是須要前進後退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    autoplay:3000,/*每隔3秒自動播放*/ 
   
  }) 
  mySwiper.startAutoplay();   /*自動播放*/   
 

  </script>

</body>
</html>

演示：http://www.swiper.com.cn/demo/index.html 在新窗口打開-查看源代碼css