Swiper基本使用方法:
一、加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。
二、HTML内容。(我是基于angular1.x)
<div class="swiper-container jb_carousel" id="jb_carousel"> <div class="swiper-wrapper" > <div class="swiper-slide" ng-repeat="img in carousel track by $index"> <button ng-click="homeInfo.CarouselLink(img)">阅读详情</button> <a href="" class="car" ng-click="homeInfo.CarouselLink(img)"> <img ng-src="{{img.imgPc}}" alt="{{img.title}}"> </a> <div class="jb_carousel_text" id="jb_carousel_text" ng-cloak=""> <p class="ani title" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0s"> {{img.configXml.title}} </p> <div swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay=".2s" class="ani title jb_carousel_content"> {{img.configXml.content}} </div> </div> </div> </div> </div>
三、初始化Swiper
var mySwiper = new Swiper('.swiper-container', { //重置轮播加载方法 pagination : {//分页 el : '.swiper-pagination', clickable : true }, navigation : {// swiper.realIndex // 如果需要前进后退按钮 nextEl : '.next', prevEl : '.prev' }, slidesPerView : 1, paginationClickable : true, spaceBetween : 5, autoplay : true, keyboardControl : true, //下面两行是为了解决动态加载数据时初始化swiper的,不然不显示 observer : true,//修改swiper自己或子元素时,自动初始化swiper observeParents : true,//修改swiper的父元素时,自动初始化swiper on:{ init : function ( ) { //Swiper2.x的初始化是onFirstInit swiperAnimateCache(this); //隐藏动画元素 // swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd : function ( ) { swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 } } });
Swiper Animate使用方法
1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。
2. 初始化时隐藏元素并在需要的时刻开始动画。
<script> //Swiper4.x var mySwiper = new Swiper ('.swiper-container', { on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 } } }) //Swiper3.x、Swiper2.x var mySwiper = new Swiper ('.swiper-container', { onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit swiperAnimateCache(swiper); //隐藏动画元素 swiperAnimate(swiper); //初始化完成开始动画 }, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 } }) </script>
3. 在需要运动的元素上面增加类名 ani ,和其他的类似插件相同,Swiper Animate需要指定几个参数:
<div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容 </p> </div>
CSS3自定义动画
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } div { animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; }