swiper

注意是swiper的版本-----这里使用3版本----------------

swiper-3.3.1.min.css jquery-3.3.1.js swiper.js

初始化

<div class="swiper-container">       <div class="swiper-wrapper">           <div class="swiper-slide"></div>           <div class="swiper-slide"></div>       </div>       <div class="swiper-pagination"></div> </div> var swiper=new Swiper('.swiper-container',{    pagination: '.swiper_pagination',    autoplay:true,    paginationClickable: true,//能不能点击    speed: 1000,    loop:true });

轮播图小圆点

.swiper_pagination span:first-child{    border-top-left-radius: 5px;    border-bottom-left-radius: 5px; }

active的圆点样式

.swiper-pagination-bullet-active {    opacity: .9;    background: red;    border-radius: 5px!important; }

不是active圆点的样式

.swiper-pagination-bullet{    background-color: #2e9700;    opacity: .6; }

轮播图里的动画

swiper-3.3.1.min.css animate.min.css swiper.animate1.0.2.min.js

在需要运动的那部分元素加 ani类名

var animate='swing-tada-wobble-bounceInDown-bounceInLeft-bounceInRight-bounceInUp-bounceOut-bounceOutLeft-bounceOut-bounceOutLeft-flipInX-flip-rotateIn-lightSpeedIn-lightSpeedOut-zoomOutDown'; '<div class="content ani" swiper-animate-effect="'+arr[parseInt(Math.random()*10)]+'" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">\n' + ​

swiper-animate-effect：切换效果，例如 fadeInUp swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

在之前的swiper实例上

on:{            init: function(){                swiperAnimateCache(this); //隐藏动画元素                swiperAnimate(this); //初始化完成开始动画           },            slideChangeTransitionEnd: function(){                swiperAnimate(this);           }       },     就是指var swiper=new Swiper('.swiper-container',{