Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Geraldo Filho

Botão de slide não funciona

Por , em Desenvolvimento frontend

Recommended Posts

Wilherme    0

Wilherme
Postado

Esses botões de avançar e voltar não funcionaram quando chegar ultimo slide.

 

Veja abaixo:

http://fazerteste.eu5.org/

 

 

Alguém pode me ajudar para resolver o problema.

 

Espero sua resposta.

 

Muito obrigado!

 

Poste seu código para darmos uma olhada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Geraldo Filho    0

Geraldo Filho
Postado 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="css/estilo.css" rel="stylesheet" type="text/css">
	
    <!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    
    <!----------------------- BANNER --------------------------->
    <link rel="stylesheet" type="text/css" href="css/style2.css" />
	<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
    <!-------------------- FIM DE BANNER ----------------------->
    
</head>
<body>

<!-- PUBLICIDADE -->
<header id="animacao">
		<div class="container">
			<div id="da-slider" class="da-slider">
				<div class="da-slide"><!-------- 01 -------->
                	<div class="img-e1" >
                		<div class="da-img"><img src="imagens/1_1.png" alt="image01" /></div>
                	</div>
                    <div class="texto-box1">                
                        <h2>Pagsystem Mobile</h2>
                        <p>Nunca mais perca uma venda.
                        Aceite cartões de crédito já, com seu smartphone ou tablet.
                        Cadastre-se e instale o aplicativo e comece a receber pagamento 
                        em questão de minutos. Perfeito para revendedores de venda 
                        direta e para micro e pequenos comerciantes.</p>
					</div>                        
                	<div class="img-d1" >
                		<div class="da-img"><img src="imagens/1_2.png" alt="image01" /></div>
                	</div>
				</div>
				<div class="da-slide"><!-------- 02 -------->
                	<div class="img-e2" >
                		<div class="da-img"><img src="imagens/2_1.png" alt="image01" /></div>
                	</div>
                	<div class="img-e21" >
                		<div class="da-img"><img src="imagens/2_2.png" alt="image01" /></div>
                	</div>                                     
                    <div class="texto-box2">                
                        <h2>Pagsystem Online</h2>
                        <p>A maneira mais fácil e segura de pagar e receber online
                        Pagsystem Online é a forma mais fácil de pagar e receber 
                        pagamentos online. Fácil instalação, rapidez na transação e 
                        pacotes de recebimento adequados ao seu negócio.</p>
                    </div>
                	<div class="img-d2" >
                		<div class="da-img"><img src="imagens/2_3.png" alt="image01" /></div>
                	</div>
				</div>
				<div class="da-slide"><!-------- 03 -------->
                	<div class="img-e3" >
                		<div class="da-img"><img src="imagens/3_1.png" alt="image01" /></div>
                	</div>
                	<div class="img-e31" >
                		<div class="da-img"><img src="imagens/3_2.png" alt="image01" /></div>
                	</div>                                     
                    <div class="texto-box3">                
                        <h2>Pagsystem Online</h2>
                        <p>A maneira mais fácil e segura de pagar e receber online
                        Pagsystem Online é a forma mais fácil de pagar e receber 
                        pagamentos online. Fácil instalação, rapidez na transação e 
                        pacotes de recebimento adequados ao seu negócio.</p>
                    </div>
                	<div class="img-d3" >
                		<div class="da-img"><img src="imagens/3_3.png" alt="image01" /></div>
                	</div>
				</div>
				<div class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</div>
			</div>
		</div>            
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.cslider.js"></script>
		<script type="text/javascript">
			$(function() {
			
				$('#da-slider').cslider({
					autoplay	: true,
					bgincrement	: 0
				});
			
			});
		</script>	
</header>
</body>
</html>

 

@charset "utf-8";
/* CSS Document */

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
------------------ ESTRUTURA -----------------
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* XHTML, HTML4, HTML5.
---------------------------------------------------------------------*/
body,p,div,a,ul,li,h1,h2,h3,h4,h5,h6{
	margin:0px;
	padding:0px;
	font-size: 100%;
	font-family: Arial, Verdana, sans-serif;	
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
/* Altura e fundo
---------------------------------------------------------------------*/
#animacao{
	background:url(../imagens/fundoBanner.jpg);
	height:335px;
	box-shadow: rgba(0,0,0,5) 1px 2px 8px inset;		
}

/* Largura
---------------------------------------------------------------------*/
.container{
	margin-left: auto;
	margin-right: auto;	
	width:960px;
}

.da-slider{
	width: 100%;
	height: 355px;
	position: relative;
	overflow: hidden;
	-webkit-transition: background-position 1s ease-out 0.3s;
	-moz-transition: background-position 1s ease-out 0.3s;
	-o-transition: background-position 1s ease-out 0.3s;
	-ms-transition: background-position 1s ease-out 0.3s;
	transition: background-position 1s ease-out 0.3s;
}
.da-slide{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	text-align: left;
}
.da-slide-current{
	z-index: 1000;
}
.da-slider-fb .da-slide{
	left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
	left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-img{
	position: absolute;
	opacity: 0;
	left: 110%;
}
.da-slide h2{
	color: #fff;
	font-size: 45px;
	width: 50%;
	top: 85px;
	white-space: nowrap;
	z-index: 10;
	text-shadow: 1px 1px 4px #000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}
.da-slide p{
	width: 45%;
	top: 150px;
	color: #F9F9FF;
	font-size: 16px;
	height: 120px;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
}
.da-slide .da-img{
	text-align: center;
	width: 30%;
	height: 256px;
	line-height: 320px;
	left: 110%; /*60%*/
}
/* ------------- 01 ------------- */
.da-slide .img-e1 .da-img{
	top: 16px;	
}
.da-slide .img-d1 .da-img{
	top: 20px;	
}
/* ------------- 02 ------------- */
.da-slide .img-e2 .da-img{
	top: 50px;	
}
.da-slide .img-e21 .da-img{
	top: 155px;	
}
.da-slide .img-d2 .da-img{
	top: -55px;	
}
/* ------------- 03 ------------- */
.da-slide .img-e3 .da-img{
	top: 50px;	
}
.da-slide .img-e31 .da-img{
	top: 155px;	
}
.da-slide .img-d3 .da-img{
	top: -55px;	
}

.da-dots{
	width: 100%;
	position: absolute;
	text-align: right;
	bottom:30px;
	right:77px;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-dots span{
	display: inline-block;
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #999;
	margin: 3px;
	cursor: pointer;
}
.da-dots span.da-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 1px;
	left: 1px;
	border-radius: 50%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-arrows span{
	position: absolute;
	bottom:28px;
	height: 30px;
	width: 30px;
	cursor: pointer;
	z-index: 2000;
}
.da-slider:hover .da-arrows span{
	opacity: 1;
}
.da-arrows span:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(../imagens/arrows.png) no-repeat top left;
	border-radius: 50%;
}
.da-arrows span:hover:after{
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
	background-position: top right;
}
.da-arrows span.da-arrows-prev{
	right: 40px;
}
.da-arrows span.da-arrows-next{
	right: 15px;
}

.da-slide-current .texto-box1 h2,
.da-slide-current .texto-box1 p{
	left: 32%;
	opacity: 1;
}
.da-slide-current .texto-box2 h2,
.da-slide-current .texto-box2 p{
	left: 46%;
	opacity: 1;
}
.da-slide-current .texto-box3 h2,
.da-slide-current .texto-box3 p{
	left: 46%;
	opacity: 1;
}
/* ---------------   01   --------------- */
.da-slide-current .img-e1 .da-img{
	left: 0%;
	opacity: 1;
}
.da-slide-current .img-d1 .da-img{
	left: 75%;
	opacity: 1;
}
/* ---------------   02   --------------- */
.da-slide-current .img-e2 .da-img{
	left: 0%;
	opacity: 1;
}
.da-slide-current .img-e21 .da-img{
	left: 22%;
	opacity: 1;
}
.da-slide-current .img-d2 .da-img{
	left: 78%;
	opacity: 1;
}
/* ---------------   03   --------------- */
.da-slide-current .img-e3 .da-img{
	left: 0%;
	opacity: 1;
}
.da-slide-current .img-e31 .da-img{
	left: 22%;
	opacity: 1;
}
.da-slide-current .img-d3 .da-img{
	left: 78%;
	opacity: 1;
}


/* Animation classes and animations */

/* Slide in from the right*/
.da-slide-fromright .texto-box1 h2,
.da-slide-fromright .texto-box1 p{
	-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .texto-box2 h2,
.da-slide-fromright .texto-box2 p{
	-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .texto-box3 h2,
.da-slide-fromright .texto-box3 p{
	-webkit-animation: fromRightAnim3 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim3 0.6s ease-in-out 0.8s both;
}
/* ---------------   01   --------------- */
.da-slide-fromright .img-e1 .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .img-d1 .da-img{
	-webkit-animation: fromRightAnim5 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim5 0.6s ease-in-out 0.8s both;
}
/* ---------------   02   --------------- */
.da-slide-fromright .img-e2 .da-img{
	-webkit-animation: fromRightAnim6 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim6 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .img-e21 .da-img{
	-webkit-animation: fromRightAnim7 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim7 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .img-d2 .da-img{
	-webkit-animation: fromRightAnim8 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim8 0.6s ease-in-out 0.8s both;
}
/* ---------------   03   --------------- */
.da-slide-fromright .img-e3 .da-img{
	-webkit-animation: fromRightAnim9 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim9 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .img-e31 .da-img{
	-webkit-animation: fromRightAnim10 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim10 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .img-d3 .da-img{
	-webkit-animation: fromRightAnim11 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim11 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{0%{ left: 110%; opacity: 0; }	100%{ left: 32%; opacity: 1; }}
@-webkit-keyframes fromRightAnim2{0%{ left: 110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@-webkit-keyframes fromRightAnim3{0%{ left: 110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@-webkit-keyframes fromRightAnim4{0%{ left: 110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromRightAnim5{0%{ left: 110%; opacity: 0; }	100%{ left: 75%; opacity: 1; }}
@-webkit-keyframes fromRightAnim6{0%{ left: 110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromRightAnim7{0%{ left: 110%; opacity: 0; }	100%{ left: 22%; opacity: 1; }}
@-webkit-keyframes fromRightAnim8{0%{ left: 110%; opacity: 0; }	100%{ left: 78%; opacity: 1; }}
@-webkit-keyframes fromRightAnim9{0%{ left: 110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromRightAnim10{0%{ left: 110%; opacity: 0; } 100%{ left: 22%; opacity: 1; }}
@-webkit-keyframes fromRightAnim11{0%{ left: 110%; opacity: 0; } 100%{ left: 78%; opacity: 1; }}

@keyframes fromRightAnim1{0%{ left: 110%; opacity: 0; }	100%{ left: 32%; opacity: 1; }}
@keyframes fromRightAnim2{0%{ left: 110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@keyframes fromRightAnim3{0%{ left: 110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@keyframes fromRightAnim4{0%{ left: 110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@keyframes fromRightAnim5{0%{ left: 110%; opacity: 0; }	100%{ left: 75%; opacity: 1; }}
@keyframes fromRightAnim6{0%{ left: 110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@keyframes fromRightAnim7{0%{ left: 110%; opacity: 0; }	100%{ left: 22%; opacity: 1; }}
@keyframes fromRightAnim8{0%{ left: 110%; opacity: 0; }	100%{ left: 78%; opacity: 1; }}
@keyframes fromRightAnim9{0%{ left: 110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@keyframes fromRightAnim10{0%{ left: 110%; opacity: 0; } 100%{ left: 22%; opacity: 1; }}
@keyframes fromRightAnim11{0%{ left: 110%; opacity: 0; } 100%{ left: 78%; opacity: 1; }}

/* Slide in from the left*/
.da-slide-fromleft .texto-box1 h2,
.da-slide-fromleft .texto-box1 p{
	-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .texto-box2 h2,
.da-slide-fromleft .texto-box2 p{
	-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .texto-box3 h2,
.da-slide-fromleft .texto-box3 p{
	-webkit-animation: fromLeftAnim3 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim3 0.6s ease-in-out 0.6s both;
}
/* ---------------   01   --------------- */
.da-slide-fromleft .img-e1 .da-img{
	-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .img-d1 .da-img{
	-webkit-animation: fromLeftAnim5 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim5 0.6s ease-in-out 0.6s both;
}
/* ---------------   02   --------------- */
.da-slide-fromleft .img-e2 .da-img{
	-webkit-animation: fromLeftAnim6 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim6 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .img-e21 .da-img{
	-webkit-animation: fromLeftAnim7 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim7 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .img-d2 .da-img{
	-webkit-animation: fromLeftAnim8 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim8 0.6s ease-in-out 0.6s both;
}
/* ---------------   03   --------------- */
.da-slide-fromleft .img-e3 .da-img{
	-webkit-animation: fromLeftAnim9 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim9 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .img-e31 .da-img{
	-webkit-animation: fromLeftAnim10 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim10 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .img-d3 .da-img{
	-webkit-animation: fromLeftAnim11 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim11 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{0%{ left: -110%; opacity: 0; }	100%{ left: 32%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim2{0%{ left: -110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim3{0%{ left: -110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim4{0%{ left: -110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim5{0%{ left: -110%; opacity: 0; }	100%{ left: 75%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim6{0%{ left: -110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim7{0%{ left: -110%; opacity: 0; }	100%{ left: 22%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim8{0%{ left: -110%; opacity: 0; }	100%{ left: 78%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim9{0%{ left: -110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim10{0%{ left: -110%; opacity: 0; } 100%{ left: 22%; opacity: 1; }}
@-webkit-keyframes fromLeftAnim11{0%{ left: -110%; opacity: 0; } 100%{ left: 78%; opacity: 1; }}

@keyframes fromLeftAnim1{0%{ left: -110%; opacity: 0; }	100%{ left: 32%; opacity: 1; }}
@keyframes fromLeftAnim2{0%{ left: -110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@keyframes fromLeftAnim3{0%{ left: -110%; opacity: 0; }	100%{ left: 46%; opacity: 1; }}
@keyframes fromLeftAnim4{0%{ left: -110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@keyframes fromLeftAnim5{0%{ left: -110%; opacity: 0; }	100%{ left: 75%; opacity: 1; }}
@keyframes fromLeftAnim6{0%{ left: -110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@keyframes fromLeftAnim7{0%{ left: -110%; opacity: 0; }	100%{ left: 22%; opacity: 1; }}
@keyframes fromLeftAnim8{0%{ left: -110%; opacity: 0; }	100%{ left: 78%; opacity: 1; }}
@keyframes fromLeftAnim9{0%{ left: -110%; opacity: 0; }	100%{ left: 0%; opacity: 1; }}
@keyframes fromLeftAnim10{0%{ left: -110%; opacity: 0; } 100%{ left: 22%; opacity: 1; }}
@keyframes fromLeftAnim11{0%{ left: -110%; opacity: 0; } 100%{ left: 78%; opacity: 1; }}

/* Slide out to the right */
.da-slide-toright .texto-box1 h2,
.da-slide-toright .texto-box1 p{
	-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright .texto-box2 h2,
.da-slide-toright .texto-box2 p{
	-webkit-animation: toRightAnim2 0.6s ease-in-out 0.6s both;
	animation: toRightAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-toright .texto-box3 h2,
.da-slide-toright .texto-box3 p{
	-webkit-animation: toRightAnim3 0.6s ease-in-out 0.6s both;
	animation: toRightAnim3 0.6s ease-in-out 0.6s both;
}
/* ---------------   01   --------------- */
.da-slide-toright .img-e1 .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in-out both;
	animation: toRightAnim4 0.6s ease-in-out both;
}
.da-slide-toright .img-d1 .da-img{
	-webkit-animation: toRightAnim5 0.6s ease-in-out both;
	animation: toRightAnim5 0.6s ease-in-out both;
}
/* ---------------   02   --------------- */
.da-slide-toright .img-e2 .da-img{
	-webkit-animation: toRightAnim6 0.6s ease-in-out both;
	animation: toRightAnim6 0.6s ease-in-out both;
}
.da-slide-toright .img-e21 .da-img{
	-webkit-animation: toRightAnim7 0.6s ease-in-out both;
	animation: toRightAnim7 0.6s ease-in-out both;
}
.da-slide-toright .img-d2 .da-img{
	-webkit-animation: toRightAnim8 0.6s ease-in-out both;
	animation: toRightAnim8 0.6s ease-in-out both;
}
/* ---------------   03   --------------- */
.da-slide-toright .img-e3 .da-img{
	-webkit-animation: toRightAnim9 0.6s ease-in-out both;
	animation: toRightAnim9 0.6s ease-in-out both;
}
.da-slide-toright .img-e31 .da-img{
	-webkit-animation: toRightAnim10 0.6s ease-in-out both;
	animation: toRightAnim10 0.6s ease-in-out both;
}
.da-slide-toright .img-d3 .da-img{
	-webkit-animation: toRightAnim11 0.6s ease-in-out both;
	animation: toRightAnim11 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{0%{ left: 32%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim2{0%{ left: 46%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim3{0%{ left: 46%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim4{0%{ left: 0%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim5{0%{ left: 75%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim6{0%{ left: 0%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim7{0%{ left: 22%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim8{0%{ left: 78%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim9{0%{ left: 0%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim10{0%{ left: 22%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@-webkit-keyframes toRightAnim11{0%{ left: 78%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}

@keyframes toRightAnim1{ 0%{ left: 32%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim2{ 0%{ left: 46%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim3{ 0%{ left: 46%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim4{ 0%{ left: 0%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim5{0%{ left: 75%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim6{0%{ left: 0%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim7{0%{ left: 22%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim8{0%{ left: 78%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim9{0%{ left: 0%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim10{0%{ left: 22%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}
@keyframes toRightAnim11{0%{ left: 78%;  opacity: 1; }	30%{ left: 55%;  opacity: 1; }	100%{ left: 100%; opacity: 0; }}

/* Slide out to the left*/
.da-slide-toleft .texto-box1 h2, 
.da-slide-toleft .texto-box1 p{
	-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
	animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft .texto-box2 h2, 
.da-slide-toleft .texto-box2 p{
	-webkit-animation: toLeftAnim2 0.6s ease-in-out both;
	animation: toLeftAnim2 0.6s ease-in-out both;
}
.da-slide-toleft .texto-box3 h2, 
.da-slide-toleft .texto-box3 p{
	-webkit-animation: toLeftAnim3 0.6s ease-in-out both;
	animation: toLeftAnim3 0.6s ease-in-out both;
}
/* ---------------   01   --------------- */
.da-slide-toleft .img-e1 .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
.da-slide-toleft .img-d1 .da-img{
	-webkit-animation: toLeftAnim5 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim5 0.6s ease-in-out 0.5s both;
}
/* ---------------   02   --------------- */
.da-slide-toleft .img-e2 .da-img{
	-webkit-animation: toLeftAnim6 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim6 0.6s ease-in-out 0.5s both;
}
.da-slide-toleft .img-e21 .da-img{
	-webkit-animation: toLeftAnim7 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim7 0.6s ease-in-out 0.5s both;
}
.da-slide-toleft .img-d2 .da-img{
	-webkit-animation: toLeftAnim8 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim8 0.6s ease-in-out 0.5s both;
}
/* ---------------   03   --------------- */
.da-slide-toleft .img-e3 .da-img{
	-webkit-animation: toLeftAnim9 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim9 0.6s ease-in-out 0.5s both;
}
.da-slide-toleft .img-e31 .da-img{
	-webkit-animation: toLeftAnim10 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim10 0.6s ease-in-out 0.5s both;
}
.da-slide-toleft .img-d3 .da-img{
	-webkit-animation: toLeftAnim11 0.6s ease-in-out 0.5s both;	
	animation: toLeftAnim11 0.6s ease-in-out 0.5s both;
}										 
@-webkit-keyframes toLeftAnim1{	0%{ left: 32%;  opacity: 1; }	30%{ left: 15%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim2{	0%{ left: 46%;  opacity: 1; }	30%{ left: 15%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim3{	0%{ left: 46%;  opacity: 1; }	30%{ left: 15%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim4{	0%{ left: 0%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim5{	0%{ left: 75%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim6{	0%{ left: 0%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim7{	0%{ left: 22%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim8{	0%{ left: 78%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim9{	0%{ left: 0%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim10{0%{ left: 22%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@-webkit-keyframes toLeftAnim11{0%{ left: 78%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}

@keyframes toLeftAnim1{	0%{ left: 32%;  opacity: 1; }	30%{ left: 15%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim2{	0%{ left: 46%;  opacity: 1; }	30%{ left: 15%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim3{	0%{ left: 46%;  opacity: 1; }	30%{ left: 15%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim4{ 0%{ left: 0%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim5{ 0%{ left: 75%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim6{ 0%{ left: 0%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim7{ 0%{ left: 22%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim8{ 0%{ left: 78%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim9{	0%{ left: 0%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim10{0%{ left: 22%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
@keyframes toLeftAnim11{0%{ left: 78%;  opacity: 1; }	100%{ left: -50%; opacity: 0; }}
(function( $, undefined ) {
		
	/*
	 * Slider object.
	 */
	$.Slider 				= function( options, element ) {
	
		this.$el	= $( element );
		
		this._init( options );
		
	};
	
	$.Slider.defaults 		= {
		current		: 0, 	// index of current slide
		bgincrement	: 0,	// increment the bg position (parallax effect) when sliding
		autoplay	: false,// slideshow on / off
		interval	: 5000  // time between transitions
    };
	
	$.Slider.prototype 	= {
		_init 				: function( options ) {
			
			this.options 		= $.extend( true, {}, $.Slider.defaults, options );
			
			this.$slides		= this.$el.children('div.da-slide');
			this.slidesCount	= this.$slides.length;
			
			this.current		= this.options.current;
			
			if( this.current < 0 || this.current >= this.slidesCount ) {
			
				this.current	= 0;
			
			}
			
			this.$slides.eq( this.current ).addClass( 'da-slide-current' );
			
			var $navigation		= $( '<div class="da-dots"/>' );
			for( var i = 0; i < this.slidesCount; ++i ) {
			
				$navigation.append( '<span/>' );
			
			}
			$navigation.appendTo( this.$el );
			
			this.$pages			= this.$el.find('div.da-dots > span');
			this.$navNext		= this.$el.find('span.da-arrows-next');
			this.$navPrev		= this.$el.find('span.da-arrows-prev');
			
			this.isAnimating	= false;
			
			this.bgpositer		= 0;
			
			this.cssAnimations	= Modernizr.cssanimations;
			this.cssTransitions	= Modernizr.csstransitions;
			
			if( !this.cssAnimations || !this.cssAnimations ) {
				
				this.$el.addClass( 'da-slider-fb' );
			
			}
			
			this._updatePage();
			
			// load the events
			this._loadEvents();
			
			// slideshow
			if( this.options.autoplay ) {
			
				this._startSlideshow();
			
			}
			
		},
		_navigate			: function( page, dir ) {
			
			var $current	= this.$slides.eq( this.current ), $next, _self = this;
			
			if( this.current === page || this.isAnimating ) return false;
			
			this.isAnimating	= true;
			
			// check dir
			var classTo, classFrom, d;
			
			if( !dir ) {
			
				( page > this.current ) ? d = 'next' : d = 'prev';
			
			}
			else {
			
				d = dir;
			
			}
				
			if( this.cssAnimations && this.cssAnimations ) {
				
				if( d === 'next' ) {
				
					classTo		= 'da-slide-toleft';
					classFrom	= 'da-slide-fromright';
					++this.bgpositer;
				
				}
				else {
				
					classTo		= 'da-slide-toright';
					classFrom	= 'da-slide-fromleft';
					--this.bgpositer;
				
				}
				
				this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );
			
			}
			
			this.current	= page;
			
			$next			= this.$slides.eq( this.current );
			
			if( this.cssAnimations && this.cssAnimations ) {
			
				var rmClasses	= 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
				$current.removeClass( rmClasses );
				$next.removeClass( rmClasses );
				
				$current.addClass( classTo );
				$next.addClass( classFrom );
				
				$current.removeClass( 'da-slide-current' );
				$next.addClass( 'da-slide-current' );
				
			}
			
			// fallback
			if( !this.cssAnimations || !this.cssAnimations ) {
				
				$next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
					left : '0%'
				}, 1000, function() { 
					_self.isAnimating = false; 
				});
				
				$current.stop().animate( {
					left : ( d === 'next' ) ? '-100%' : '100%'
				}, 1000, function() { 
					$current.removeClass( 'da-slide-current' ); 
				});
				
			}
			
			this._updatePage();
			
		},
		_updatePage			: function() {
		
			this.$pages.removeClass( 'da-dots-current' );
			this.$pages.eq( this.current ).addClass( 'da-dots-current' );
		
		},
		_startSlideshow		: function() {
		
			var _self	= this;
			
			this.slideshow	= setTimeout( function() {
				
				var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
				_self._navigate( page, 'next' );
				
				if( _self.options.autoplay ) {
				
					_self._startSlideshow();
				
				}
			
			}, this.options.interval );
		
		},
		page				: function( idx ) {
			
			if( idx >= this.slidesCount || idx < 0 ) {
			
				return false;
			
			}
			
			if( this.options.autoplay ) {
			
				clearTimeout( this.slideshow );
				this.options.autoplay	= false;
			
			}
			
			this._navigate( idx );
			
		},
		_loadEvents			: function() {
			
			var _self = this;
			
			this.$pages.on( 'click.cslider', function( event ) {
				
				_self.page( $(this).index() );
				return false;
				
			});
			
			this.$navNext.on( 'click.cslider', function( event ) {
				
				if( _self.options.autoplay ) {
				
					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;
				
				}
				
				var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
				_self._navigate( page, 'next' );
				return false;
				
			});
			
			this.$navPrev.on( 'click.cslider', function( event ) {
				
				if( _self.options.autoplay ) {
				
					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;
				
				}
				
				var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
				_self._navigate( page, 'prev' );
				return false;
				
			});
			
			if( this.cssTransitions ) {
			
				if( !this.options.bgincrement ) {
					
					this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {
						
						if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {
							
							_self.isAnimating	= false;
						
						}	
						
					});
					
				}
				else {
				
					this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {
					
						if( event.target.id === _self.$el.attr( 'id' ) )
							_self.isAnimating	= false;
						
					});
				
				}
			
			}
			
		}
	};
	
	var logError 			= function( message ) {
		if ( this.console ) {
			console.error( message );
		}
	};
	
	$.fn.cslider			= function( options ) {
	
		if ( typeof options === 'string' ) {
			
			var args = Array.prototype.slice.call( arguments, 1 );
			
			this.each(function() {
			
				var instance = $.data( this, 'cslider' );
				
				if ( !instance ) {
					logError( "cannot call methods on cslider prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;
				}
				
				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method '" + options + "' for cslider instance" );
					return;
				}
				
				instance[ options ].apply( instance, args );
			
			});
		
		} 
		else {
		
			this.each(function() {
			
				var instance = $.data( this, 'cslider' );
				if ( !instance ) {
					$.data( this, 'cslider', new $.Slider( options, this ) );
				}
			});
		
		}
		
		return this;
		
	};
	
})( jQuery );

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito