Ir para conteúdo

POWERED BY:

Arquivado

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

milaestrela

Carrossel - itens não se comportam igual nas tabs

Por , em Desenvolvimento frontend

Recommended Posts

milaestrela    0

milaestrela
Postado

Olá!!

To com um probleminha tentando resolver há um tempão, não sei o que pode ser... peguei um codigo pra tabs, coloquei um script de carrossel dentro de cada uma, iguais, mas na 1ª tab só que o efeito fica perfeito (os itens estão com width="500px", nas 2ª e 3ª fica um width="130px" fixo, que eu não consigo alterar de jeito nenhum!!! Alguém me ajuda??

Aqui está: link

Compartilhar este post

Link para o post
Compartilhar em outros sites

milaestrela    0

milaestrela
Postado

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jCarousel Examples</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/dynamicpage.js"></script>
<script type="text/javascript" src="jsor-jcarousel-7bb2e0a/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jsor-jcarousel-7bb2e0a/lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/carrossel.js"></script>
<link rel="stylesheet" type="text/css" href="jsor-jcarousel-7bb2e0a/skins/tango/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
   jQuery('.mycarousel').jcarousel();
});

</script>

</head>
<body>
<div id="usual1" class="usual"> 
 <ul> 
   <li><a class="selected" href="#tab1">Tab 1</a></li> 
   <li><a href="#tab2">Tab 2</a></li> 
   <li><a href="#tab3">Tab 3</a></li> 
 </ul> 
 <div id="tab1"><ul class="mycarousel jcarousel-skin-tango"><!--carousel-->
<li>
   <a href="#" title=""><img src="" /></a>
<h3>Edifício Electra</h3>
<p>Entregue no prazo: Março/11</p>
<p>100% vendido</p>
</li>
<li>
<a href="#" title=""><img src="imagens/fotos/omega-mini.png" /></a>
<h3>Edifício Capricórnius</h3>
<p>Entregue no prazo: Agosto/10</p>
<p>100% vendido</p>
</li>
<li>
<a href="#" title=""><img src="imagens/fotos/titan-mini.jpg" /></a>
<h3>Edifício Áries</h3>
<p>Entregue no prazo: Dezembro/09</p>
<p>100% vendido</p>
</li>
 	</ul></div> 
 <div id="tab2"><ul class="mycarousel jcarousel-skin-tango" style="width:500px;"><!--carousel-->
<li>
   <a href="#" title=""><img src="imagens/fotos/titan-mini.jpg" /></a>
<h3>Edifício Electra</h3>
<p>Entregue no prazo: Março/11</p>
<p>100% vendido</p>
</li>
<li>
<a href="#" title=""><img src="imagens/fotos/omega-mini.png" /></a>
<h3>Edifício Capricórnius</h3>
<p>Entregue no prazo: Agosto/10</p>
<p>100% vendido</p>
</li>
<li>
<a href="#" title=""><img src="imagens/fotos/titan-mini.jpg" /></a>
<h3>Edifício Áries</h3>
<p>Entregue no prazo: Dezembro/09</p>
<p>100% vendido</p>
</li>
 	</ul></div> 
 <div id="tab3">
 <ul class="mycarousel jcarousel-skin-tango" style="width:500px;"><!--carousel-->
<li>
   <a href="#" title=""><img src="imagens/fotos/titan-mini.jpg" /></a>
<h3>Edifício Electra</h3>
<p>Entregue no prazo: Março/11</p>
<p>100% vendido</p>
</li>
<li>
<a href="#" title=""><img src="imagens/fotos/omega-mini.png" /></a>
<h3>Edifício Capricórnius</h3>
<p>Entregue no prazo: Agosto/10</p>
<p>100% vendido</p>
</li>
<li>
<a href="#" title=""><img src="imagens/fotos/titan-mini.jpg" /></a>
<h3>Edifício Áries</h3>
<p>Entregue no prazo: Dezembro/09</p>
<p>100% vendido</p>
</li>
 	</ul>
 </div> 

   </div> 
<script type="text/javascript"> 
 $("#usual1 ul").idTabs(); 
</script>
</body>
</html>

 

CSS:

.jcarousel-skin-tango .jcarousel-direction-rtl {
direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {/*largura caixa*/
   width: 400px;
   padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
   width: 75px;
   height: 245px;
   padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
   overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {/*altura caixa*/
   width:  400px;/*/largura todos itens*/
   height: 300px;
}
.jcarousel-clip .jcarousel-clip-horizontal{
height:100px}

.jcarousel-skin-tango .jcarousel-clip-vertical {
   width:  75px;
   height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {/*cada item*/
   width: 150px;
   height: 250px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
   margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
   margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
   margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
   background: #fff;
   color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
   position: absolute;
   top: 43px;
   right: 5px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
   left: 5px;
   right: auto;
   background-image: url(prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
   background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
   background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
   cursor: default;
   background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
   position: absolute;
   top: 43px;
   left: 5px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
   left: auto;
   right: 5px;
   background-image: url(next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
   background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
   background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
   cursor: default;
   background-position: -96px 0;
}

/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
   position: absolute;
   bottom: 5px;
   left: 43px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
   background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
   background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
   cursor: default;
   background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
   position: absolute;
   top: 5px;
   left: 43px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
   background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
   background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
   cursor: default;
   background-position: 0 -96px;
}

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