Swiper使用方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>
        <style type="text/css"> .swiper-container { width: 600px; height: 300px;
            }  
        </style>
    </head>
    <body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <!--导航等组件可以放在container之外-->
        
        <script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>
        <script>        
          var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', //水平方向
 loop: true, //循环
            
            // 如果需要分页器
 pagination: '.swiper-pagination', // 如果需要前进后退按钮
 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条
 scrollbar: '.swiper-scrollbar', }) </script>
    </body>
</html>

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

2.添加HTML内容。

3.你可能想要给Swiper定义一个大小，当然不要也行。

4.初始化Swiper：最好是挨着</body>标签。

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript"> window.onload = function() { ... } </script>

或者这样（Jquery和Zepto）

<script type="text/javascript"> $(document).ready(function () { ... }) </script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了，如果没有，你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅。

*建议不使用Source Map功能，请把js压缩文件最后一行//# sourceMappingURL=maps/swiper.min.js.map 删掉。以免在某些浏览器出现以下提示：

如需要使用Source Map，演示包里面有该map文件，请放在相应的位置

================================================================================

二、选项和参数介绍：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>
 7         <style type="text/css">
 8             .swiper-container {
 9                 width: 600px;
10                 height: 300px;
11             }  
12             .swiper-slide{
13                 background: blueviolet;    
14                 color: #FFF;
15                 line-height: 300px;
16                 font-size: 20px;
17                 text-align: center;
18             }
19         </style>
20     </head>
21     <body>
22         <div class="swiper-container">
23             <div class="swiper-wrapper">
24                 <div class="swiper-slide">Slide 1</div>
25                 <div class="swiper-slide">Slide 2</div>
26                 <div class="swiper-slide">Slide 3</div>
27                 <div class="swiper-slide">Slide 4</div>
28                 <div class="swiper-slide">Slide 5</div>
29                 <div class="swiper-slide">Slide 6</div>
30                 <div class="swiper-slide">Slide 7</div>
31                 <div class="swiper-slide">Slide 8</div>
32             </div>
33             <!-- 如果需要分页器(下边的点点) -->
34             <div class="swiper-pagination"></div>
35             
36             <!-- 如果需要导航按钮（左右的箭头按钮） -->
37             <div class="swiper-button-prev"></div>
38             <div class="swiper-button-next"></div>
39             
40             <!-- 如果需要滚动条（下边的滚动条） -->
41             <div class="swiper-scrollbar"></div>
42         </div>
43         <!--导航等组件可以放在container之外-->
44         <script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
45         <script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>
46         <script>        
47           var mySwiper = new Swiper ('.swiper-container', {
48               //initialSlide  设定初始化时slide的索引(即开始的位置为第几个)。
49               initialSlide :2,    //把第三个作为首个显示
50               
51               //direction: Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
52             //direction:'vertical',   //垂直方向滑动
53             direction:"horizontal",   //水平方向滑动
54             
55             //自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
56             autoplay : 3000,
57             
58             //滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。默认：300
59             speed: 300,
60             
61             //设置为true 则开启loop模式
62             loop : true,
63             slidesPerView : "auto",    //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
64             loopedSlides :8,           //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
65             
66             // 如果需要分页器
67             pagination: '.swiper-pagination',
68             paginationClickable :true,  //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
69             
70             // 如果需要前进后退按钮
71             nextButton: '.swiper-button-next',      //前进按钮的css选择器或HTML元素。
72             prevButton: '.swiper-button-prev',      //后退按钮的css选择器或HTML元素。
73             
74             // 如果需要滚动条
75             scrollbar: '.swiper-scrollbar',  //添加滚动条
76             scrollbarHide : false,           //滚动条是否自动隐藏。默认：true会自动隐藏。
77             scrollbarDraggable : true ,      //该参数设置为true时允许拖动滚动条。
78             scrollbarSnapOnRelease : true ,  //如果设置为true，释放滚动条时slide自动贴合。
79             
80             //zoom  
81             //焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。
82             //需要在slide中增加类名swiper-zoom-container，结构如下：
83             //<div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image"> </div> </div>
84             //zoom : true,
85             
86           })        
87           </script>
88     </body>
89 </html>

更多选项-参数请参考：配置选项API

swiper下载链接：下载Swiper

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 关于swiper的2个问题 Swiper 用法 idangerous swiper swiper轮播 Swiper和Swiper Animate使用方法 swiper教程--swiper的基础使用（二十） Swiper介绍及使用 swiper鼠标滚轮事件 React中使用swiper vue 使用swiper