[Resolvido] A cada X segundos, mostrar de 4 em 4 elementos.

[Maykel-ctba 233]

Fala povo,

 

estou fazendo algo como um carrossel, mas os sliders disponiveis na internet não me servem, pois preciso mudar de 4 em 4 itens, e não de 1 em 1 como é feito comumente.

 

Tenho uma série de logomarcas dispostas em LI's, e gostaria de mostrar de 4 em 4 a cada X segundos.

 

Como posso fazer?

[William Bruno 1501]

só fazer o carousel de 4 em 4, por exemplo:

http://wbruno.com.br/blog/2011/04/15/carousel-jquery-usando-cycle/

[Maykel-ctba 233]

O problema do jCycle é que ele não permite muito que eu modifique o CSS.

 

Eu tenho a lista mostrando 2 linhas de itens. 2x2, vamos dizer. O jCycle, até onde eu mexi, só permite em uma linha horizontal ou uma linha vertical, mas não 2.

 

Exemplificando:

 

 

Quero que a cada 3 segundos, saiam estas 4 imagens, e entrem 4 novas no lugar. Elas estão todas em LI.

 

                    <ul>
                       <li><img src="../imagens/2012/clientes/castrolanda.png" alt="Castrolanda" title="Castrolanda" /></li>
                       <li><img src="../imagens/2012/clientes/leao.png" alt="Leão" title="Leão" /></li>
                       <li><img src="../imagens/2012/clientes/hering.png" alt="Cia Hering" title="Cia Hering" /></li>
                       <li><img src="../imagens/2012/clientes/brf.png" alt="BR Foods" title="BR Foods" /></li>                        <li><img src="../imagens/2012/clientes/castrolanda.png" alt="Castrolanda" title="Castrolanda" /></li>
                       <li><img src="../imagens/2012/clientes/leao.png" alt="Leão" title="Leão" /></li>
                       <li><img src="../imagens/2012/clientes/hering.png" alt="Cia Hering" title="Cia Hering" /></li>
                       <li><img src="../imagens/2012/clientes/brf.png" alt="BR Foods" title="BR Foods" /></li>
                   </ul>

[William Bruno 1501]

O problema do jCycle é que ele não permite muito que eu modifique o CSS.

permite sim. o jCycle é o mais customizável de todos q eu conheço.

 

 

Eu tenho a lista mostrando 2 linhas de itens. 2x2, vamos dizer.

basta estilizar com o teu css.

Note que pelo meu exemplo, cada "grupo" q rotaciona, é uma UL entendeu ?

 

 

O jCycle, até onde eu mexi, só permite em uma linha horizontal ou uma linha vertical, mas não 2.

isso é você que faz no teu css.

A limitação do cycle, é se vai rolar horizontal ou vertical, mas a apresentação de 2x2 você pode facilmente fazer com css.

 

 

ficaria assim o html:

                   <ul>
                       <li><img src="../imagens/2012/clientes/castrolanda.png" alt="Castrolanda" title="Castrolanda" /></li>
                       <li><img src="../imagens/2012/clientes/leao.png" alt="Leão" title="Leão" /></li>
                       <li><img src="../imagens/2012/clientes/hering.png" alt="Cia Hering" title="Cia Hering" /></li>
                       <li><img src="../imagens/2012/clientes/brf.png" alt="BR Foods" title="BR Foods" /></li>
                   </ul>
                   <ul>
                       <li><img src="../imagens/2012/clientes/castrolanda.png" alt="Castrolanda" title="Castrolanda" /></li>
                       <li><img src="../imagens/2012/clientes/leao.png" alt="Leão" title="Leão" /></li>
                       <li><img src="../imagens/2012/clientes/hering.png" alt="Cia Hering" title="Cia Hering" /></li>
                       <li><img src="../imagens/2012/clientes/brf.png" alt="BR Foods" title="BR Foods" /></li>
                   </ul>

entendeu ?

 

ai você rotaciona de UL em UL, e usa css para deixar 2x2.

 

:lol:

[Maykel-ctba 233]

hummm :rolleyes:

 

vou fazer uma tentativa com o jCycle novamente então, vou fuçar mais aqui! Valeu!!!

[Maykel-ctba 233]

@Willian, tentei fazer do jeito que você falou, mas está f***...

Deixei por enquanto só uma lista, e mesmo assim não está funcionando...

 

usei o link que você indicou, e segui a risca o tutorial. Ficou assim:

 

		#wrap_carousel {  
		background-color: #121212;  
		width:260px;  
		height: 93px;  
		position: relative;  
	}  
	#carousel li {  
		float:left;  
		overflow:hidden;  
		width:120px;  
		height:93px;  
		display:inline; 
		text-align:center;
	}  		

		$('#wrap_carousel #carousel-1').jsCarousel({ 
		autoscroll: 			true, 
		fx: 					'scrollHorz',
		itemstodisplay: 		3,
		orientation: 			'h'
	});

                    <div id="wrap_carousel">
                       <div id="carousel-1">  
                           <ul>  
                               <li><img src="../imagens/2012/clientes/castrolanda.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/leao.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/hering.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/brf.png" alt="" /></li>  
                           </ul>  
                       </div>
                   </div>

 

Ele não retorna erro no meu developer (firebug) e não muda a imagem! :nataldry:

[William Bruno 1501]

é algo assim amigo:

 

                   <div id="wrap_carousel">
                           <ul>  
                               <li><img src="../imagens/2012/clientes/castrolanda.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/leao.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/hering.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/brf.png" alt="" /></li>  
                           </ul>
                           <ul>  
                               <li><img src="../imagens/2012/clientes/castrolanda.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/leao.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/hering.png" alt="" /></li>  
                               <li><img src="../imagens/2012/clientes/brf.png" alt="" /></li>  
                           </ul>
                   </div>

e ai:

 

 

 $('#wrap_carousel ul').cycle({

entendeu ?

 

não conheço esse plugin q você ta usando, mas com o Cycle eu já teria resolvido :lol:

[Maykel-ctba 233]

eu peguei o script no site que você mesmo indicou, fera :nataltongue:

 

vou ver com o Cycle então! Valeu!

[William Bruno 1501]

eu peguei o script no site que você mesmo indicou, fera :nataltongue:

eu não :lol:

 

lá uso o cycle:

<script type="text/javascript">  
$(document).ready(function(){  
   $('#carousel').cycle({  
       fx:         'scrollHorz',  
       prev:       '#prev',  
       next:       '#next'  
   });  

});  

http://wbruno.com.br/blog/2011/04/15/carousel-jquery-usando-cycle/

 

você não leu com atenção o post ne?!

eu digo que vou "reproduzir" o efeito do jsCarousel, mas usando o cycle.

Note o código que está no post.

[Maykel-ctba 233]

Opa, cagada minha!

 

Vamo que vamo, vou dar uma olhada!

[Maykel-ctba 233]

Perfeito! Funcionou perfeitamente @William Bruno!