Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Primeiramente venho-lhes pedir desculpas, pois não sei se estou na plataforma correta para o esclarecimento de minha dúvida, sou iniciante no fórum, e não encontrei nada que pudesse me ajudar.
Bom, então vamos a dúvida. Estou assumindo o controle de site e estou com uma paquena dúvida, o HEADER do site é chamado através de um CSS, sendo que no lugar do HEADER onde está sendo utilizado uma imagem JPG, gostaria de colocar um slideshow de fotos. Como isso seria possível? Tentei colocar um slideshow criado no próprio DREAMWEAVER mais não consegui.
Obs: A imagem do HEADER fica dentro de uma DIV, e abaixo dessas encontra-se outras DIVs como a do LOGO, MENU e etc...
Segue as partes do código abaixo:
Esse no INDEX.
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<div class="wrapper">
<div class="header">
<div style="float:left; margin-left:55px; margin-top:40px;">
<img src="images/logo2.png" style="float:left;">body
{
margin: 0 auto;
}
.wrapper width: 1024px;
height: auto;
text-align: center;
display: table-cell;
margin: 0 auto;
} width: 1024px;
height: 300px;
background: url(../images/header.jpg);
background-repeat: no-repeat;
}>
Eu acabei de repassar em outro tópico o Easy Slider que poderia ser adicionado facilmente no header do seu arquivo. Veja o tópico e aproveite para ler sobre o link do Easy Slider que adicionei
http://forum.imasters.com.br/index.php?/topic/402943-slider/
Uma pequena dica, para adicionar basta copia e colar o código do slider dentro desse seu header e depois linkar os arquivos necessários para seu funcionamento.
Isso é muito interessante, mais eu queria sem controles algo que quando entrasse no site já rodasse lá, automático saca? Tipo um flash mesmo simples, mais eu não tou sabendo colocá-lo no CSS.
É só tirar o controle.. Veja uma das demos do site link.
Se você ver ali tem apenas as setas de avançar e voltar que você simplesmente não precisa adicionar.
Isso é verdadeiramente ótimo! Mais não estou conseguindo colocar isso para funcionar. Já estou pensando na ideia de colocar uma imagem fixa. =S
Boa tarde,
Não desista não !
Aqui tem mais um modelo basico para lhe auxiliar.
Pow mano, vlw pela força, o problema é que não estou sabendo colocar essa parada no lugar certo. A minha maior dúvida é como e onde colocar isso no texto CSS saca?
Mas o que voce não consegue implementar, seja mais especifico para lhe ajudarmos.
>
Mas o que voce não consegue implementar, seja mais especifico para lhe ajudarmos.
Tipo como falei antes, o meu HEADER é uma imagem que está no arquivo CSS do site. Tentei trocar a imagem por slideshow em flash feito no próprio DREAMWEAVER mais não rolou =/! Queria saber como coloco lá no arquivo CSS? Lá encima você ver os códigos! Se puder me ajudar cara, vou ser muito grato!
Se tiver como você postar o que conseguiu implementar até o momento a gente vai ajudando na evolução do restante, ok?
A imagem é apenas um background
background: url(../images/header.jpg);
O que poderia ser feito (usarei o código fonte do slider demo):
Antes temos que adicionar o javascript que da vida ao slider no cabeçalho xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<div class="wrapper">
<div class="header">
<div id="slider">
<ul>
<li><a href="#"><img src="images/01.jpg" alt="Slide1" /></a></li>
<li><a href="#"><img src="images/02.jpg" alt="Slide2" /></a></li>
<li><a href="#"><img src="images/03.jpg" alt="Slide3" /></a></li>
<li><a href="#"><img src="images/04.jpg" alt="Slide4" /></a></li>
<li><a href="#"><img src="images/05.jpg" alt="Slide5" /></a></li>
</ul>
</div>
<div style="float:left; margin-left:55px; margin-top:40px;"> <!-- o que é isso? Div está incompleta por isso a dúvida... -->
<img src="images/logo2.png" style="float:left;">A css que o site mostra é
/ Easy Slider /
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
definir a largura e a altura do item da lista (slide)
controle de toda área do slider será ajuste de acordo com os parâmetros fornecidos aqui
*/
width:696px;
height:241px;
overflow:hidden;
}É um código pronto, acho que está bem fácil. Eu retirei a parte dos botôes porque você falou que queria apenas as imagens correndo.
Todo esse código que msotrei vem no arquivo zipado que tem pra baixar no site é só conferir...
Anderson,
Eu estou com uma dificuldade ao contrário:
Eu coloquei o código completo, porém justamente os botões não aparecem, ao invés disso aparece embaixo do slide o nome previous e next que ao serem clocados, eles tem a ação de avançar ou retroceder. Para funcionar tem que alterar as propriedades, ou será o caminho das imagens no CSS que não estou colocando corretamente???
Eu acabei de repassar em outro tópico o Easy Slider que poderia ser adicionado facilmente no header do seu arquivo. Veja o tópico e aproveite para ler sobre o link do Easy Slider que adicionei
http://forum.imasters.com.br/index.php?/topic/402943-slider/
Uma pequena dica, para adicionar basta copia e colar o código do slider dentro desse seu header e depois linkar os arquivos necessários para seu funcionamento.