@media screen and(min-width:800px){
.swiper-container {
width:530px;
height:100%;
margin: 0auto;
}
}
@media screen and(max-width:800px){
.swiper-container {
width:100%;
height:100%;
}
}
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-slide {
text-align: center;
font-size: 18px;
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;
}
var swiper = newSwiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
watchSlidesProgress : true,
mousewheelControl:true,
onInit: function(swiper){
$(".p1_2").animate({"opacity":"1","width":"73%","height":"48%"},500,
function(){
$(".p1_2").addClass("pulse");
setTimeout(function(){
$(".p1_2").removeClass("pulse");
$(".p1_3").animate({"opacity":"1","left":"18%"},200).animate({"left":"14%"},200);
$(".p1_4").animate({"opacity":"1","right":"20%"},200,
function(){
$(".p1_5").animate({"opacity":"1","width":"15%"},1000,
function(){
$(".p1_1").animate({"opacity":"1","top":"3%"},200,
function(){
$(".p1_6").animate({"opacity":"1","bottom":"0%"},1000,
function(){
$(".p1_7").animate({"opacity":"1"},100)
})
})
}).animate({"width":"11%"},100)
})
},1000
)}
);
},
onTransitionStart:function(swiper){
if(swiper.activeIndex!=0){
$(".p1_1").css({"opacity":"0","top":"0%","left":"10%"});
$(".p1_2").css({"opacity":"0","width":"40%","height":"25%","top":"17%","left":"12%"});
$(".p1_3").css({"opacity":"0","left":"0%","top":"23%"});
$(".p1_4").css({"opacity":"0","right":"0%","top":"18%"});
$(".p1_5").css({"opacity":"0","top":"18%","left":"25%"});
$(".p1_6").css({"opacity":"0","bottom":"-30%","left":"8%"});
$(".p1_7").css({"opacity":"0","bottom":"3%","left":"38%"});
}
if(swiper.activeIndex!=1){
$(".p2_1").css({"opacity":"0","top":"5%","left":"8%"});
$(".p2_2").css({"opacity":"0","top":"0%","left":"4%"});
$(".p2_3").css({"opacity":"0","top":"25%","left":"0%"});
$(".p2_4").css({"opacity":"0","top":"40%","left":"0%"});
$(".p2_5").css({"opacity":"0","top":"10%","left":"0%"});
$(".p2_6").css({"opacity":"0","top":"55%","right":"0%"});
$(".p2_7").css({"opacity":"0","top":"70%","left":"0%"});
$(".p2_8").css({"opacity":"0","top":"85%","left":"0%"});
$(".p2_9").css({"opacity":"0","top":"50%","right":"0%"});
$(".p2_10").css({"opacity":"0","top":"45%","right":"30%"});
}
if(swiper.activeIndex!=2) {
$(".p3_1").css({"opacity":"0", "top": "17%", "left": "18%"});
$(".p3_2").css({"opacity":"0", "top": "5%", "left": "30%"});
$(".p3_3").css({"opacity":"0", "top": "8%", "left": "0%"});
$(".p3_4").css({"opacity":"0", "top": "12%", "right": "0%"});
$(".p3_5").css({"opacity":"0", "top": "52%", "left": "5%"});
$(".p3_5").removeClass("flipiny");
$(".p3_6").css({"opacity":"0", "top": "52%", "left": "40%"});
$(".p3_6").removeClass("flipiny");
$(".p3_7").css({"opacity":"0", "top": "52%", "left": "73%"});
$(".p3_7").removeClass("flipiny");
$(".p3_8").css({"opacity":"0", "top": "76%", "left": "5%"});
$(".p3_8").removeClass("flipiny");
$(".p3_9").css({"opacity":"0", "top": "76%", "left": "40%"});
$(".p3_9").removeClass("flipiny");
$(".p3_10").css({"opacity":"0","top": "76%", "left": "73%"});
$(".p3_10").removeClass("flipiny");
}
if(swiper.activeIndex!=3){
$(".p4_1").css({"opacity":"0","top":"5%","left":"5%"});
$(".p4_1").removeClass("flipiny");
$(".p4_2").css({"opacity":"0","top":"2%","left":"5%"});
$(".p4_3").css({"opacity":"0","top":"10%","left":"0%"});
$(".p4_4").css({"opacity":"0","top":"0%","left":"28%"});
$(".p4_5").css({"opacity":"0","top":"40%","left":"18%","width":"0px"});
$(".p4_6").css({"opacity":"0","top":"55%","left":"18%","width":"0px"});
$(".p4_7").css({"opacity":"0","top":"70%","left":"18%","width":"0px"});
}
if(swiper.activeIndex!=4){
$(".p5_1").css({"opacity":"0","top":"14.8%","left":"0%"});
$(".p5_2").css({"opacity":"0","top":"10%","left":"22%"});
$(".p5_3").removeClass("fadeinleft");
$(".p5_4").removeClass("fadeinleft");
}
},
onTransitionEnd:function(swiper){
switch(swiper.activeIndex){
case 0:
$(".p1_2").animate({"opacity":"1","width":"75%","height":"48%"},500,
function(){
$(".p1_2").addClass("pulse");
setTimeout(function(){
$(".p1_2").removeClass("pulse");
$(".p1_3").animate({"opacity":"1","left":"18%"},200).animate({"left":"14%"},200);
$(".p1_4").animate({"opacity":"1","right":"20%"},200,
function(){
$(".p1_5").animate({"opacity":"1","width":"15%"},1000,
function(){
$(".p1_1").animate({"opacity":"1","top":"3%"},200,
function(){
$(".p1_6").animate({"opacity":"1","bottom":"0%"},1000,
function(){
$(".p1_7").animate({"opacity":"1"},100)
})
})
}).animate({"width":"11%"},100)
})
},1000
)}
);
break;
case 1:
$(".p2_1").animate({"opacity":"1"},200,
function(){
$(".p2_5").animate({"opacity":"1","left":"20%"},200,
function(){
$(".p2_2").animate({"opacity":"1","width":"35%"},300)
.animate({"width":"31%"},200,
function() {
$(".p2_3").animate({"opacity":"1","left":"13%"},200,
function() {
$(".p2_4").animate({"opacity":"1","left":"5%"},200,
function(){
$(".p2_9").animate({"opacity":"1"},200,
function() {
$(".p2_6").animate({"opacity":"1","right":"35%"},200,
function() {
$(".p2_10").animate({"opacity":"1","width":"23%"},200)
.animate({"width":"20%"},200,
function() {
$(".p2_7").animate({"opacity":"1","left":"13%"},200,
function() {
$(".p2_8").animate({"opacity":"1","left":"5%"},200)
})
})
})
})
})
})
})
})
});
break;
case 2:
$(".p3_1").animate({"opacity":"1"},200,
function () {
$(".p3_2").animate({"opacity":"1"},200,
function () {
$(".p3_4").animate({"opacity":"1","right":"28%"},200)
.animate({"right":"23%"},100);
$(".p3_3").animate({"opacity":"1","left":"33%"},200)
.animate({"left":"27%"},100,
function () {
// $(".p3_10").addClass("flipiny");
// $(".p3_10").animate({"opacity":"1"},1000);
$(".p3_5").addClass("flipiny");
$(".p3_6").addClass("flipiny");
$(".p3_7").addClass("flipiny");
$(".p3_8").addClass("flipiny");
$(".p3_9").addClass("flipiny");
$(".p3_10").addClass("flipiny");
})
})
});
break;
case 3:
$(".p4_1").addClass("flipiny");
$(".p4_3").animate({"opacity":"1","left":"28%"},200,
function () {
$(".p4_2").animate({"opacity":"1"},200,
function () {
$(".p4_4").animate({"opacity":"1","width":"10%"},200)
.animate({"width":"8%"},100,
function () {
$(".p4_5").animate({"opacity":"1","width":"64%"},500,
function () {
$(".p4_6").animate({"opacity":"1","width":"64%"},500,
function () {
$(".p4_7").animate({"opacity":"1","width":"64%"},500)
})
})
})
})
});
break;
case 4:
$(".p5_1").animate({"opacity":"1","left":"10%"},200,
function () {
$(".p5_4").addClass("fadeinleft");
$(".p5_2").animate({"opacity":"1","top":"4%","width":"56%"},200,
function () {
$(".p5_3").addClass("fadeinleft");
}).animate({"width":"55%"},200)
});
break;
}
}
});
