Slider

[First 1]

Olá.

 

Bom,

 

estou fazendo um slider com 3 imagens, eu conseguir obter o efeito que eu desejava, mas eu quero fazer algumas personalizações.

Olhe o código.

$("#slider ul").cycle({
	fx: 'fade',
	speed: 0,
	timeout: 4000,
});

Bom a imagem muda em 4 em 4 segundos tudo belezinha, só que quando chega na terceira imagem fica some todas as imagens e passa 4 segundos volta para a primeira... então eu queria desta forma.

 

Primeira imagem a 4 segundos muda para a Segunda imagem

Segunda imagem a 4 segundos muda para a Terceira imagem

Terceira imagem a 4 segundos volta para a primeira imagem

e assim vai

 

e também tenho três span

<span class="slider1" style="background: #000">Primeiro</span>
<span class="slider2" style="background: #F69">Segundo</span>
<span class="slider3" style="background: #F95">Terceiro</span>

se tiver na imagem 1 fica com a span 1 e assim no mesmo como segundo e terceiro

 

 

 

Fico no aguardo de quem poder me ajudar.

[Anderson Danilo 43]

Como você está fazendo? está +/- assim:

 

<div id="slider">
    <ul>
        <li>
            <img src="banner1.png" />
            <span>Primeiro</span>
        </li>
        <li>
            <img src="banner2.png" />
            <span>Segundo</span>
        </li>
        <li>
            <img src="banner3.png" />
            <span>Terceira</span>
        </li>
    </ul>
</div>

[First 1]

Assim...

<div class="slider">
	<div id="slider">
		<ul>
			<li><img src="banner1.png"/></li>
			<li><img src="banner2.png"/></li>
			<li><img src="banner3.png"/></li>
		</ul>
	</div>
	
	<div id="sliderbt" class="botoesbanner">
		<span class="slider1" style="background: #000">Primeiro</span>
		<span class="slider2" style="background: #F69">Segundo</span>
		<span class="slider3" style="background: #F95">Terceiro</span>
	</div>
</div>

O'Que devo fazer?

[Anderson Danilo 43]

Se você quer que o texto apareça dentro do banner você deve colocar após a tag img.

 

Depois você pode usar a propriedade position do css para posicionar o texto

http://tableless.com.br/propriedade-position-do-css/

[First 1]

Acho que você entendeu mal a minha questão...

 

Amigo, eu quero que o slider fica mudando de imagem de primeira a terceira de terceira a primeira e assim em diante. Quero que fique estes botões 'Primeiro, Segunda e Terceiro' para quando clicar nele muda o slider para a sua ordem.

 

 

Compreende? ou quer que eu explique mais para você poder me ajudar?

[Marlon Pacheco 132]

Você poderia utilizar a opção pager do Cycle?

$('#div')
.cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav' 
});

[First 1]

Amigo deu certo, porem eu queria utilizar minhas spans já prontas que esta personalizadas.

<li class="first"><img src="img/first.png"/></li>
<li class="second"><img src="img/second.png"/></li>
<li class="third"><img src="img/third.png"/></li>

se eu clicar na primeira li vai para o slider primeiro e assim em diante...

 

 

Tem como?

[Marlon Pacheco 132]

Nunca usei o Cycle, mas acho que você pode pegar a marcação gerada por ele e alterar via script para o modelo que você tem.

Ou isso, ou buscar outro Slider.

Ou ainda: http://shouldiuseacarousel.com/

[First 1]

Muito obrigado com isso eu conseguir resolver o meu problema, apenas estudei a documentação do cycle e conseguir resolver irei deixar aqui o código que me ajudou.

pagerAnchorBuilder: function(index, DOMelement){
	return '<a></a>';
}

E na âncora você pode adicionar class e id e dentro da âncora você pode adicionar textos e <img src=""/>

 

 

Resolvido