1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "utf-8" >
     < title >Swiper demo</ title >
     < link  rel = "stylesheet"  href = "css/swiper.min.css" />
     
     < script  src = "jslib/swiper.js" ></ script >
 
     < script >
         window.onload = function() {
                 var swiper = new Swiper('.swiper-container', {
                 pagination: '.swiper-pagination',
                 paginationClickable: true,
                 nextButton: '.swiper-button-next',
                 prevButton: '.swiper-button-prev',
                 loop:true
             });
         };
     </ script >
 
     < style >
         .swiper-container {
             width: 500px;
             height: 500px;
         }
 
         .swiper-slide img{
             height:100%;
             width:100%
         }
     </ style >
</ head >
< body >
     < div  class = "swiper-container" >
         < div  class = "swiper-wrapper" >
             < div  class = "swiper-slide" >
                 < img  src = "images/1.jpg"  />
             </ div >
             < div  class = "swiper-slide" >
                 < img  src = "images/2.jpg"  />
             </ div >
             < div  class = "swiper-slide" >
                 < img  src = "images/3.jpg"  />
             </ div >
         </ div >
         <!-- 分页按钮 -->
         < div  class = "swiper-pagination" ></ div >
 
         <!-- 导航按钮 -->
         < div  class = "swiper-button-prev" ></ div >
         < div  class = "swiper-button-next" ></ div >
     </ div >
</ body >
</ html >