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

swiper.com.cn使用方法

Swiper说明及API手册说明