Ir para conteúdo

POWERED BY:

Arquivado

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

Diego Fersan

Slide dentro de outro slide

Por , em Javascript

Recommended Posts

Diego Fersan    0

Diego Fersan
Postado

Senhoras e senhores, boa tarde de domingo.

 

Estou tentando criar um SLIDE dentro de um outro SLIDE. Como assim?

 

Slide Pai: Gira o portifólio de clientes.

Slide Filho: Gira os trabalhos feitos para o cliente exibido no slide pai.

 

Fui claro ou confundi? Rs.

 

Estou usando Jquery e o plugin Cycle.

 

Abaixo o que estou tentando fazer, e que aparentemente não funciona.

 

 

  <!DOCTYPE HTML>
 <html lang="pt-br">
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/cycle.js"></script>

 <script type="text/javascript">

     $(function(){
         $("#slidePai ul").cycle({
                 fx: "scrollLeft",
                 speed: 2500,
                 timeout: 0,
                 next: "#slides",
             })

             $("#slideFilho ul").cycle({
                 fx: "scrollLeft",
                 speed: 2500,
                 timeout: 1000,
             })
         })
 </script>

 <link rel="stylesheet" type="text/css" href="css/folha.css">
 </head>

 <body>
     <div id="slidePai">
         <ul>
             <li><div style="background-color:#F00; width:600px; height:400px">Slide Pai 1</div></li>
             <li><div style="background-color:#abeafe; width:600px; height:400px">Slide Pai 2</div></li>
 <!-- NESSA TELA EU TENTO INSERIR O SEGUNDO SLIDE-->
             <li>
                 <div style="background-color:blue; width:600px; height:400px">
                     <div id="slideFilho">
                             <ul>
                                 <li><div>slideFilho 1</div></li>
                                 <li><div>slideFilho 2</div></li>
                                 <li><div>slideFilho 3</div></li>
                             </ul>
                      </div>
                  </div>
             </li>
 <!-- TERMINA AQUI -->
         </ul>
     </div>

 </body>
 </html>

 

Desde já agradeço a ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diego Fersan    0

Diego Fersan
Postado

Galera, só agora eu percebi que postei o código errado.

Na verdade o código é esse abaixo:

 

 <!DOCTYPE HTML>
 <html lang="pt-br">
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/cycle.js"></script>

 <script type="text/javascript">

     $(function(){
		$("#slidePai #sp").cycle({
                 fx: "scrollLeft",
                 speed: 2500,
                 timeout: 0,
                 next: "#next",
             })

		$("#slidePai #sf").cycle({
                 fx: "scrollLeft",
                 speed: 2500,
                 timeout: 0,
                 next: "#next",
             })
         })
 </script>

 <link rel="stylesheet" type="text/css" href="css/folha.css">
 </head>

 <body>
     <div id="slidePai">
         <ul id="sp">
             <li><div style="background-color:#F00; width:600px; height:400px">Slide Pai 1</div></li>
             <li><div style="background-color:#abeafe; width:600px; height:400px">Slide Pai 2</div></li>
 <!-- NESSA TELA EU TENTO INSERIR O SEGUNDO SLIDE-->
             <li>
                 <div style="width:600px; height:400px">
                     <div id="slideFilho">
                             <ul id="sf">
                                 <li><img src="img/tela1.jpg" width="600" height="200"></li>
                                 <li><img src="img/tela2.jpg" width="600" height="200"></li>
                                 <li><img src="img/tela3.jpg" width="600" height="200"></li>
                             </ul>
                      </div>
                  </div>
             </li>
 <!-- TERMINA AQUI -->
         </ul>
     </div>
<a href="#" id="next">Próximo</a>
 </body>
 </html>

 

Nem de longe consegui chegar a um resultado(ainda).

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Esses dados vêm do banco de dados ou são fixos?

A idéia nem envolve muito o plugin, envolve você trocar o conteúdo da lista 'animável', só alterando os filhos dela.

Isso pode ser feito com Ajax ou javascript puro...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Se eu entendi bem, é assim:

Existe o slide 'pai' e cada slide 'pai' tem um slide 'filho', certo?

 

A idéia é: ative TODOS os slides de uma vez, filhos e pai, mas ESCONDA todos, menos o ativo.

Quando o usuário clicar em um certo item do slide pai, esconda todos os slides e mostre o correspondente ao item clicado...

Compartilhar este post

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

Informação importante

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

  Aceito