swiper来自官网

作者: 尘中老 | 来源:发表于2016-10-05 22:29 被阅读0次

swiper来自官网
jQuery , Swiper 相关链接汇总
图片轮播插件
在Vue中使用Swiper轮播图
06.项目轮播swiper组件
Swiper4插件使用之图片轮播
swiper2.7.6常用效果整理
IE兼容swiper2
swiper基础实例该如何应用到自己的项目中去
swiper display:none 后 display:b

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

<!DOCTYPE html>
<html><head> ... 
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body> ... 
    <script src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate.min.js"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head> ... 
  <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body> ... 
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script>
</body></html>

2.HTML内容。

<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之外--> 
<div class="swiper-container slider">
      <div class="swiper-wrapper">
           <div class="swiper-slide" >
                <p class="ani"  swiper-animate-effect="zoomInRight"
 swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slide 1</p>
<!--在需要运动的元素上面增加类名  ani   ，
和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp 
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s-->
           </div>
      </div>
</div>

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

.swiper-container { width: 600px; height: 300px;}

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

<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', }) ;
var slider = new Swiper('.slider',{

             onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
              }, 

            onSlideChangeEnd: function(swiper){
                    var i =swiper.activeIndex;
                    mySwiper.slideTo(i,1000);
                     swiperAnimate(swiper); 

                
                }


            })     

</script>
</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 删掉。