Como cetralizar slider

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como cetralizar slider

Mensagem por jefferson023 em 30/06/13, 04:56 pm

Qual é minha questão:
Olá.meu slider no meu forum não que centralizar eu ja tentei usar esse dois codigos 
Código:
<center>
</center>

Código:

<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="mes-txt"><center><iframe style="left: 0px; right: 0px;" src="http://theworld.forumeiros.com/h1-teste"frameborder="no" scrolling="no" height="293" width="954"></iframe></center></div><span class="corners-bottom"><span></span></span></div><div>  

mais nenhum desse dois fucionou

Endereço do meu fórum:
http://theworld.forumeiros.com

Versão do fórum:
PHPBB2
avatar

jefferson023
Nível 8

Masculino
Inscrito dia : 21/06/2013
Mensagens : 129
Pontos Ativos : 218

Ver perfil do usuário http://theworld.forumeiros.com/

Resolvido Re: Como cetralizar slider

Mensagem por MateusA em 30/06/13, 10:06 pm

Olá!

Qual é o código do seu slide?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Como cetralizar slider

Mensagem por jefferson023 em 30/06/13, 10:52 pm

Código:
<html>
<body>
<style>.main_view {
  float: left;
  position: relative;
}
.window {
  height:237px;  width: 462px;
  overflow: hidden;
  position: relative;
}
.image_reel {
  position: absolute;
  top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
  position: absolute;
  bottom: 40px; right: 0px;
  width: 178px; height: 0px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  line-height: 40px;
  background: url(paging_bg2.png) no-repeat;
  display: none;
}
.paging a {
  padding: 5px;
  text-decoration: none;
  color: #fff;
}
.paging a.active {
  font-weight: bold;
  background: #920000;
  border: 1px solid #610000;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}</style>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>$(document).ready(function() {

$(".paging").show();
$(".paging a:first").addClass("active");

var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
$active.addClass('active');

$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});

//On Click
$(".paging a").click(function() {
$active = $(this);

clearInterval(play);
rotate();
rotateSwitch();
return false;
});

});
</script><div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.elitejogos.com/"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ7r-XGhDOAxjIATIIjmV8zZbPyCM" alt="" /></a>
<a href="http://maconariaguild.forumeiros.com/t199-ganhe-mais-moedas-e-drops-com-o-ano-novo-bonificado#729"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ3sGI4wEQzgMYyAEyCCMNLMTnZt79" alt="" /></a>
<a href="http://maconariaguild.forumeiros.com/t200-participe-do-concurso-de-quadrinhos-ferias#730"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ3sGUnAEQzgMYyAEyCL4tpKU6b0-f" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
</div>
</div>
</body>
</html>

Código:

<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="No" width="100%" height="100" style= " top: 0%; left: 0%;height: 235px;width: 100%;" src="ENDEREÇO_DA_PAGINA"></iframe>

avatar

jefferson023
Nível 8

Masculino
Inscrito dia : 21/06/2013
Mensagens : 129
Pontos Ativos : 218

Ver perfil do usuário http://theworld.forumeiros.com/

Resolvido Re: Como cetralizar slider

Mensagem por Sennior em 01/07/13, 12:16 am

Saudações amigo! Muito feliz

Troque teu código pelo abaixo:

Código:
<html>
<body>
<style>.main_view {
  float: center;
  position: relative;
}
.window {
  height:237px;  width: 462px;
  overflow: hidden;
  position: relative;
}
.image_reel {
  position: absolute;
  top: 0; center: 0;
}
.image_reel img {float: center;}

.paging {
  position: absolute;
  bottom: 40px; right: 0px;
  width: 178px; height: 0px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  line-height: 40px;
  background: url(paging_bg2.png) no-repeat;
  display: none;
}
.paging a {
  padding: 5px;
  text-decoration: none;
  color: #fff;
}
.paging a.active {
  font-weight: bold;
  background: #920000;
  border: 1px solid #610000;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}</style>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>$(document).ready(function() {

$(".paging").show();
$(".paging a:first").addClass("active");

var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
$active.addClass('active');

$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});

//On Click
$(".paging a").click(function() {
$active = $(this);

clearInterval(play);
rotate();
rotateSwitch();
return false;
});

});
</script><div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.elitejogos.com/"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ7r-XGhDOAxjIATIIjmV8zZbPyCM" alt="" /></a>
<a href="http://maconariaguild.forumeiros.com/t199-ganhe-mais-moedas-e-drops-com-o-ano-novo-bonificado#729"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ3sGI4wEQzgMYyAEyCCMNLMTnZt79" alt="" /></a>
<a href="http://maconariaguild.forumeiros.com/t200-participe-do-concurso-de-quadrinhos-ferias#730"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ3sGUnAEQzgMYyAEyCL4tpKU6b0-f" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
</div>
</div>
</body>
</html>

Abraços,
Mikéé!
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como cetralizar slider

Mensagem por jefferson023 em 01/07/13, 09:54 am

ficou centralizado mais ao trocar as imagens e link ficou com imagens coladas
avatar

jefferson023
Nível 8

Masculino
Inscrito dia : 21/06/2013
Mensagens : 129
Pontos Ativos : 218

Ver perfil do usuário http://theworld.forumeiros.com/

Resolvido Re: Como cetralizar slider

Mensagem por MateusA em 01/07/13, 10:56 am

Olá!

Você colocou as imagens nas mesmas dimensões das antigas?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Como cetralizar slider

Mensagem por jefferson023 em 01/07/13, 04:13 pm

olá.
não coloquei nas mesma dimeções das antigas
avatar

jefferson023
Nível 8

Masculino
Inscrito dia : 21/06/2013
Mensagens : 129
Pontos Ativos : 218

Ver perfil do usuário http://theworld.forumeiros.com/

Resolvido Re: Como cetralizar slider

Mensagem por jefferson023 em 01/07/13, 05:20 pm

olá.
eu deixei o codigo do geito que estava so mudei o url das imgens por outras mais continua com as imagens juntas
avatar

jefferson023
Nível 8

Masculino
Inscrito dia : 21/06/2013
Mensagens : 129
Pontos Ativos : 218

Ver perfil do usuário http://theworld.forumeiros.com/

Resolvido Re: Como cetralizar slider

Mensagem por jefferson023 em 01/07/13, 09:18 pm

.
avatar

jefferson023
Nível 8

Masculino
Inscrito dia : 21/06/2013
Mensagens : 129
Pontos Ativos : 218

Ver perfil do usuário http://theworld.forumeiros.com/

Resolvido Re: Como cetralizar slider

Mensagem por Sennior em 01/07/13, 09:21 pm

Olá amigo,

Me desculpe à demora. Troque teu código pelo abaixo:

Código:
<html>
<body>
<style>.main_view {
  float: center;
  position: relative;
}
.window {
  height:237px;  width: 462px;
  overflow: hidden;
  position: relative;
}
.image_reel {
  position: absolute;
  top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
  position: absolute;
  bottom: 40px; right: 0px;
  width: 178px; height: 0px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  line-height: 40px;
  background: url(paging_bg2.png) no-repeat;
  display: none;
}
.paging a {
  padding: 5px;
  text-decoration: none;
  color: #fff;
}
.paging a.active {
  font-weight: bold;
  background: #920000;
  border: 1px solid #610000;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}</style>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>$(document).ready(function() {

$(".paging").show();
$(".paging a:first").addClass("active");

var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
$active.addClass('active');

$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});

//On Click
$(".paging a").click(function() {
$active = $(this);

clearInterval(play);
rotate();
rotateSwitch();
return false;
});

});
</script><div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.elitejogos.com/"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ7r-XGhDOAxjIATIIjmV8zZbPyCM" alt="" /></a>
<a href="http://maconariaguild.forumeiros.com/t199-ganhe-mais-moedas-e-drops-com-o-ano-novo-bonificado#729"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ3sGI4wEQzgMYyAEyCCMNLMTnZt79" alt="" /></a>
<a href="http://maconariaguild.forumeiros.com/t200-participe-do-concurso-de-quadrinhos-ferias#730"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQ3sGUnAEQzgMYyAEyCL4tpKU6b0-f" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
</div>
</div>
</body>
</html>

Abraços.

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum