Widget em forma de slide

Detalhes da questão

Endereço do fórum: https://www.criadoresdepassaros.com/
Versão do fórum: phpBB3

Descrição

Widget em forma de Slide


Criar um Wigget em forma de Slide que vai mudando a foto linkada nos artigos do Fórum incluidos no mesmo !


Obrigado

Quando o senhor diz artigos, refere-se ao novo recurso de publicações ou postagens num fórum?

Kyo Panda escreveu:Quando o senhor diz artigos, refere-se ao novo recurso de publicações ou postagens num fórum?

Bom dia , não amigo .. o que eu quero é criar um Widget que seja em Slide , artigos que se refiro são os artigos que tenho postados no Fórum e irei linkar com as imagens deste Widget o qual fica trocando de imagem linkada em uma pagina do Fórum ,

Obrigado

Agora compreendi. O senhor pode utilizar o gerador de slides aqui do fórum e utilizar o código em um Widget. O importante é definir a largura e altura certinha para não sair da barra de Widgets.

Ok , eu gerei o codigo e coloquei no widget mais se coloco o comando center pra centralizar ele fica no meio do Fórum saindo do local do Widget

Codigo gerado

Código:

 <style type="text/css">#rotator1495736143491 {height:310px;} #rotator1495736143491 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1495736143491 img { height:300;width:300; }</style>
<div id="rotator1495736143491">
    <a id="itemActif1495736143491" style="z-index:999" href="https://www.criadoresdepassaros.com/t45123-arara-caninde" title="Arara Canindé" target="_blank"><img src="https://i.servimg.com/u/f58/15/98/91/46/slidea12.jpg" alt="Arara Canindé" /></a><a href="https://www.criadoresdepassaros.com/f72-passaros-e-pesquisa-descubra-outras-especies-aqui-acesse" title="Azulão" target="_blank"><img src="https://i.servimg.com/u/f58/15/98/91/46/slidea13.jpg" alt="Azulão" /></a><a href="https://www.criadoresdepassaros.com/t45122-tucano-familia-ramphastida" title="Tucano" target="_blank"><img src="https://i.servimg.com/u/f58/15/98/91/46/slidet12.jpg" alt="Tucano" /></a><a href="https://www.criadoresdepassaros.com/t30213-trinca-ferro-reproducao#316542" title="Reprodução Trinca Ferro " target="_blank"><img src="https://i.servimg.com/u/f58/15/98/91/46/slidet10.png" alt="Reprodução Trinca Ferro " /></a><a href="https://www.criadoresdepassaros.com/t38916-calopsita-guia-completo-de-criacao-e-reproducao#291713" title="Calopsitas" target="_blank"><img src="https://i.servimg.com/u/f58/15/98/91/46/slidec14.jpg" alt="Calopsitas" /></a><a href="https://www.criadoresdepassaros.com/t44158-saiba-tudo-sobre-o-canario-gloster" title="Canário Gloster" target="_blank"><img src="https://i.servimg.com/u/f58/15/98/91/46/slidec12.jpg" alt="Canário Gloster" /></a>
</div><script type="text/javascript">(function(){var r = document.getElementById("rotator1495736143491"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1495736143491"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1495736143491";n.style.zIndex = 999})},3500)})();</script>

Tente adicionar ao CSS:

Código:

#left .module {
  position: relative;
}

Alem de colocar a CSS acima eu também devo inserir o CENTER no codigo , se for fica torto pra direita e não centraliza !

Até mais

Adicione mais esse peça ao CSS:

Código:

#rotator1495736143491 a {
    left: 50%;
    transform: translate(-50%);
}

ok , centralizou , obrigado !


Resolvido