Carrossel com botão para cada grupo...

[chlins 1]

Pessoal,

Quero fazer um carrossel de imagens com botões abaixo e cada botão mostra uma determinada quantidade de imagens.

Tipo:

Botão 1 = 2 imagens

Botão 2 = 4 imagens

 

A quantidade de imagens depende da necessidade no momento.

 

Esta função abaixo deixa padrão de 4 imagens para todos os botões:

<script type="text/javascript">
$(document).ready(function(){

	$('#slider-code').tinycarousel({
  	pager: true, display: 4,
         });

});
</script>

[Ted k' 126]

Cara... não entendi!

 

Vai escolher manualmente em quantos botões vão aparecer a quantidade, e o visual dos banners? Vão aparecer 4 de vez... 2 de vez.. 6??

[chlins 1]

Cara... não entendi!

 

Vai escolher manualmente em quantos botões vão aparecer a quantidade, e o visual dos banners? Vão aparecer 4 de vez... 2 de vez.. 6??

 

Um exemplo claro é este: Clique aqui

No primeiro botão aparecem 4 fotos, no segundo pode varias de 4 ou 6 e assim por diante.

O que quero é que eu possa mostrar em cada botão a quantidade que precisar no momento e não um valor fixo para todos os botões.

[William Bruno 1501]

cara.. essa é a definição do carousel

 

 

<div id="carousel">
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
     </ul>
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
     </ul>
     <ul>
        <li>1</li>
        <li>2</li>
     </ul>
</div>

entendeu ?

 

o primeiro grupo, tem 4 itens, o segundo grupo tem 6 itens, e o terceiro grupo tem apenas 2 itens.

 

 

o plugin vai animar o ul. E qntos itens tiver cada UL, será a quantidade de itens "de cada botão".

[chlins 1]

Tentei fazer desta forma, mas com o meu código não deu certo.

Acredito que o JS deve ser mudado, atribuindo a quantidade para cada botão (apenas acho)

 

<div id="slider-code">
<!--a href="#" class="buttons prev">left</a>-->
<div class="viewport">
   	<ul class="overview">
 	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
          	<!-- segundo botão-->
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<!-- Terceiro botão -->
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
       	<li><img src="galeria/images15.jpg" alt="">
         	<p>Você</p>
         	<span>Sua loja</span>
       	</li>
   	</ul>
</div>

 

<script type="text/javascript">
$(document).ready(function(){
	$('#slider-code').tinycarousel({
 		pager: true, display: 4,
     	});
});
</script>

[William Bruno 1501]

ai no caso, você precisa ver a documentação do tinycarousel

 

a forma que mostrei, funciona muito bem com o cycle.

você não fez 'exatamente' como mostrei, pois não definiu os grupos(cada UL é um grupo)

 

 

 

obs: pelo que vi aqui do tiny, não é possível fazer oq você quer: cada grupo ter um número diferente de fotos do outro.

O tiny suporta mas com números iguais. Para quantidades diferentes entre grupos, você vai precisar trocar de plugin.(a menos q faça uma gambiarra, como deixar LIs vazios entre os elementos)

[chlins 1]

Eu havia feito da forma que me propôs, separando os grupos por <UL>.

Postei a forma como estou usando para saber como adaptar.

Você algo pronto com o cycle de como preciso?

 

Usei o Tiny por ser bem fácil de usar, mas parece estar limitado...

Deixar a <LI> vazia poderia ser a solução se não ficasse o espaço em branco entre as imagens.

[William Bruno 1501]

já fiz esse aqui com o cycle:

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

 

porém você não vai conseguir fugir "do espaço", a menos que configure o css de cada grupo indivualmente.

[chlins 1]

já fiz esse aqui com o cycle:

http://wbruno.com.br...y-usando-cycle/

 

porém você não vai conseguir fugir "do espaço", a menos que configure o css de cada grupo indivualmente.

 

Valeu pela força,

Vou tentar algumas formas e caso não consiga, deixo como está, com grupos sem imagem real e sim uma fictícia.