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;
}
想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!