1. 程式人生 > >swiper 輪播動畫

swiper 輪播動畫

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="css/swiper.min.css">

<link rel="stylesheet" href="css/animate.min.css"><!--可刪-->

<script src="js/jquery-1.8.3.min.js"></script>

<!-- Swiper JS -->

<script src="js/swiper.min.js"></script>

<script src="js/swiper.animate1.0.2.min.js"></script>

<style>

html, body {

position: relative;

height: 100%;

}

body {

background: #eee;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 14px;

color:#000;

margin: 0;

padding: 0;

}

.swiper-container {

width: 100%;

height: 100%;

}

.swiper-slide {

text-align: center;

font-size: 18px;

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}

.hide{

display:none !important;

}

</style>

</head>

<body>

<div class="swiper-container ">

<div class="swiper-wrapper">

<div class="swiper-slide " >

<span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 1</span>

</div>

<div class="swiper-slide " >

<span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 2</span>

</div>

<div class="swiper-slide" >

<span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 3</span>

</div>

</div>

</div>

<script>

var mySwiper1 = new Swiper ('.swiper-container', {

direction: 'vertical',//豎屏

on:{

init: function(){

swiperAnimateCache(this); //隱藏動畫元素

swiperAnimate(this); //初始化完成開始動畫

},

slideChangeTransitionEnd: function(){

swiperAnimate(this); //每個slide切換結束時也運行當前slide動畫

}

}

})

</script>

</body>

</html>