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
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < link  rel = "stylesheet"  href = "css/swiper.min.css" />
     < script  src = "jslib/swiper.min.js" ></ script >
     < style >
         .swiper-container {
             width: 800px;
             height: 100%;
         }
         .swiper-slide {
             width: auto;
         }
     </ style >
</ head >
< body >
     < div  class = "swiper-container" >
         < div  class = "swiper-wrapper" >
             < div  class = "swiper-slide" >
                 < div  style = "width:1900px" >
                     < div  style = "width:33.33%;height:400px;float:left;background-color:pink;" ></ div >
                     < div  style = "width:33.33%;height:400px;float:left;background-color:green;" ></ div >
                     < div  style = "width:33.33%;height:400px;float:left;background-color:yellow;" ></ div >
                     < div  style = "clear:both;" ></ div >
                 </ div >
             </ div > <!-- swiper-slide -->
         </ div > <!-- swiper-wrapper -->
 
         <!-- Add Scroll Bar -->
         < div  class = "swiper-scrollbar" ></ div >
 
     </ div > <!-- swiper-container -->
 
< script >
     var swiper = new Swiper('.swiper-container', {
         scrollbar: '.swiper-scrollbar',
         slidesPerView: 'auto',
         freeMode: true,
         scrollbarHide:false,
         resistanceRatio : 0
     });
</ script >
</ body >
</ html >