mover slides por bts com jquery

[Eduardo Giullyanny 1]

Bom dia amigo estou com uma duvida sobre como eu poderia mover os slides ao clicar em um bt com jquery

 

 

estou usando este slide.: Clique aqui

 

estou querendo mover um bt para voltar e ir para o proximo slide, já fiz tudo q eu queria mas agora estou com dificuldade...

 

poderia me ajudar eu tentei assim por ultimo.:

javascript:slideShow.nav(1)

para ir para a frente e assim para voltar.:

javascript:slideShow.nav(-1)

 

poderiam me ajudar?

 

amigos num estou conseguindo fazer o com q isso funcione, alguem poderia me ajudar, num sou bom em javascript... estou estudando

[William Bruno 1501]

se a documentação da ferramenta, não provém uma forma simples de fazer isso, não aconselho que você tente editar o código fonte.

 

é mais simples trocar de plugin.

o cycle pra mim, é bem completo, e de fácil estilização.

http://jquery.malsup.com/cycle/

 

na documentação tem tudo oque você precisa para fazer funcionar.

[Rafael Sirotheau 43]

Esse slider utiliza o Tabs do jQueryUI...

 

De uma olhada no site do efeito, e verifique os metodos

 

http://jqueryui.com/demos/tabs/

 

 

acredito que voce deve utilizar o metodo select

 

$(boxID).tabs( "select" , index )

 

onde boxID é a id do container do slider, e index é a numero da tab, no array, que voce quer exibir...

 

Se voce que fazer uma navegacao, proximo e anterior, deve fazer algo assim:

var selected = $(boxID).tabs( "option", "selected" );

$('#next').click(function(){
     $(boxID).tabs( "select" , selected+1 )
});

$('#prev').click(function(){
     $(boxID).tabs( "select" , selected-1 )
});

 

Nao testei, mas acredito que deve funcionar. =)

[Eduardo Giullyanny 1]

amigos vejam isso.:

<script type="text/javascript" src="_js/slideMenu/jquery-ui.min.js"	></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

var selected = $("#featured").tabs( "option", "selected" );
$('#sl-pro').click(function(){
	  $("#featured").tabs( "select" , selected+1 )
});
$('#sl-ant').click(function(){
	  $("#featured").tabs( "select" , selected-1 )
});
$("#featured").tabs( "select" , 4 )
</script>

 

foi a mudanças q falarem

 

agora vejam o html, ele está com uns codigos php é pq esta buscando do bd, mas esta funcionando somente os bt q n.:

div id="featured" >
   	<a href="" class="sl-ant" title="Notícia Anterior"><img src="_img/bt_slide_ant.png" /></a>
       <a href="" class="sl-pro" title="Próxima Notícia"><img src="_img/bt_slide_pro.png" /></a>
	<ul class="ui-tabs-nav">
       <?php
       	$sqlSlide = "SELECT * FROM noticias WHERE grupoNoticias=1 ORDER BY dataNoticias, idNoticias DESC LIMIT 0,4";
		if (!$querySlide = @mysql_query($sqlSlide)){
			echo "<script type='text/javascript'>alert('Slider não podem ser exibidos corretamente! Suporte deve ser contactado!')</script>";
		}
		if (mysql_num_rows($querySlide) > 0){
			while ($rowSlide = mysql_fetch_object($querySlide)){
	?>
				<li class="ui-tabs-nav-item">
					<a href="#fragment-<?php echo $rowSlide->idNoticias; ?>">
						<h1><?php echo strtoupper($rowSlide->tituloNoticias); ?></h1>
						<a href="noticias.php"><?php echo limitarTexto($rowSlide->paragrafosNoticias, 85); ?></a>
					</a>
				</li>
	<?php
			}
	?>
		</ul>
	<?php
			$querySlideF = mysql_query("SELECT * FROM noticias WHERE grupoNoticias=1 ORDER BY dataNoticias, idNoticias DESC LIMIT 0,4");
			while ($rowSlideF = mysql_fetch_object($querySlideF)){
	?>
		<div id="fragment-<?php echo $rowSlideF->idNoticias; ?>" class="ui-tabs-panel ui-tabs-hide">
			<img src="_img/_upload/noticias/<?php echo $rowSlideF->imgNoticias; ?>" />
		</div>
	<?php
			}
		} else {
			echo "<script type='text/javascript'>alert('Notícias não podem ficar sem cadastrar dados!');</script>";
		}
	?>
</div>

 

será q dá para fazer funcionar?

[Rafael Sirotheau 43]

nao entendi esse trecho:

 

mas esta funcionando somente os bt q n.:

 

poderia explicar?

[Eduardo Giullyanny 1]

o php está funcionando, somente o bt para fazer o slide passar num está funcionando!!!

[Rafael Sirotheau 43]

Na verdade faça o seguinte

       $('#sl-pro').click(function(){
                 var selected = $("#featured").tabs( "option", "selected" );
                 $("#featured").tabs( "select" , selected+1 )
       });
       $('#sl-ant').click(function(){
                 var selected = $("#featured").tabs( "option", "selected" );
                 $("#featured").tabs( "select" , selected-1 )
       });
       $("#featured").tabs( "select" , 4 )

 

e tente colocar esse codigo dentro do

$(document).ready(function () { ... });

[Eduardo Giullyanny 1]

amigos tentei de duas formas .:

 

<script type="text/javascript">

$(document).ready(function(){
	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

});
$(document).ready(function () {
	$('#sl-pro').click(function(){
                 var selected = $("#featured").tabs( "option", "selected" );
                 $("#featured").tabs( "select" , selected+1 )
       });
       $('#sl-ant').click(function(){
                 var selected = $("#featured").tabs( "option", "selected" );
                 $("#featured").tabs( "select" , selected-1 )
       });
       $("#featured").tabs( "select" , 4 )

});
</script>

 

e assim tb.:

<script type="text/javascript">

$(document).ready(function(){
	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

	$('#sl-pro').click(function(){
                 var selected = $("#featured").tabs( "option", "selected" );
                 $("#featured").tabs( "select" , selected+1 )
       });
       $('#sl-ant').click(function(){
                 var selected = $("#featured").tabs( "option", "selected" );
                 $("#featured").tabs( "select" , selected-1 )
       });
       $("#featured").tabs( "select" , 4 )

});
</script>

 

e num deu certo ainda...

[Rafael Sirotheau 43]

O console de erros do firefox aponta alguma coisa?

 

 

essa pagina esta online? seria melhor para verificar

[Eduardo Giullyanny 1]

no momento estou clicando no titulo para passar as imagens e na descrição do texto para ir para a noticias

 

 

site Clique aqui

é o primeiro slider...

[Rafael Sirotheau 43]

tente assim

<script type="text/javascript">
$(document).ready(function(){
	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

	$('#sl-pro').click(function(){
		var selected = $("#featured > ul").tabs( "option", "selected" );
		$("#featured > ul").tabs( "select" , selected+1 )
	});
	$('#sl-ant').click(function(){
		var selected = $("#featured > ul").tabs( "option", "selected" );
		$("#featured > ul").tabs( "select" , selected-1 )
	});
	$("#featured > ul").tabs( "select" , 4 )

});
</script>

[Eduardo Giullyanny 1]

nada ainda!

eu tenho q colocar algum codigo no link o href está com link cego "#"

será q num tem cmo msm?

 

será q num tem outro geito msm...

[Eduardo Giullyanny 1]

bom galera qdo eu consegui eu procuro este post e coloca a minha solução

 

 

obrigado a todos por ajudar...

[Rafael Sirotheau 43]

Acredito que a melhor forma, para evitar voce perder ainda mais tempo nessa solucao, seria adotar o cycle... voce vai ver o quao simples ele é pra implementar e customizar... a documentacao dele é boa, nao acho q voce terá problemas.

 

Site do plugin

Link para a pagina com a demonstracao da funcao que voce quer (navegacao)