Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bru_ce

[Resolvido] Slide de imagens JQuery

Por , em Desenvolvimento frontend

Recommended Posts

Bru_ce    53

Bru_ce
Postado

BOA NOITE PESSOAL, ESTOU DESENVOLVENDO UM SITE PARA MEU CLIENTE E RESOLVI COLOCAR UM SLIDER EM JQUERY.

O EFEITO FUNCIONA PERFEITAMENTE PORÉM ELE NÃO FICA CERTO NA DIV, EM NAVEGADORES PEQUENOS FICA ERRADO, EM MAIORES FICA CORRETO, GOSTARIA DE UM HELP.

 

 

SEGUE O LINK DO SITE

 

SITE

 

SEGUE CÓDIGO HTML 

<div id="slider">

  <div id="slideshow">

         <img src="img/1.jpg" alt="Banner1" />

         <img src="img/2.jpg" alt="Banner2" />

         <img src="img/3.jpg" alt="Banner3" />

     </div>

</div>

 

SEGUE CÓDIGO CSS

 

#slideshow img {
position:relative; 
left:0; 
top:0; 
margin-left:-310px; 
margin-top:0px;
}

 

 

JA MEXI NO MARGIN-LEFT E NADA, JA DEIXEI 0 E NADA, ESTOU FICANDO LOUCO, RS

 

 

OBRIGADO PESSOAL :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Ô MAN, FOI MAL

 

SEGUE O CSS

 

@charset "utf-8";
/* CSS Document */

*{
margin:0;
padding:0;
border:0;
}

@font-face {
font-family: Avant;
src: url(../font/Avant.eot);
}
@font-face {
font-family: Avant;
src: url(../font/Avant.woff);
}
@font-face {
font-family: Avant;
src: url(../font/Avant.ttf);
}


body {
background-color:#fff;
font-size:14px;
color:#333;
font-family:Avant;
}

#topo {
width:100%;
background-image:url(../img/topo.jpg);
height:144px;
}

#cont-topo {
width:960px;
margin:0 auto;
padding:25px 0 0 0
}

#logo {
float:left;
}

#contato {
float:right;
}

#menu {
width:100%;
height:38px;
background-image:url(../img/menu.png);
}

#sprite {
width:960px;
padding:0;
margin:0 auto;
}

#sprite li {
float:left;
list-style:none;
}

#sprite li a {
background-image:url(../img/sprite.png);
background-repeat:no-repeat;
display:block;
width:160px;
height:37px;
}


#sprite li a.home {background-position:0 0;}
#sprite li a.home:hover { background-position:0 -40px;}
#sprite li a.quem {background-position:-160px 0;}
#sprite li a.quem:hover {background-position:-160px -40px;}
#sprite li a.viagem {background-position:-320px 0;}
#sprite li a.viagem:hover {background-position:-320px -40px;}
#sprite li a.fretado {background-position:-480px 0px;}
#sprite li a.fretado:hover {background-position:-480px -40px;}
#sprite li a.frota {background-position:-640px 0px;}
#sprite li a.frota:hover {background-position:-640px -40px;}
#sprite li a.fale {background-position:-800px 0px;}
#sprite li a.fale:hover {background-position:-800px -40px;}



#sprite li a#selected1 {
background-position:0 -40px;
}


#slider {
height:400px;
width:100%;
border-bottom:1px solid #d7d6d6;
}

/*#slider img {
	position:relative; 
	left:0; 
	top:0; 
	margin-left:-155px; 
	margin-top:0px;
}
*/
#slideshow{
width:100%;
height:400px;
}

#slideshow img {
position:relative; 
left:0; 
top:0; 
margin-left:-310px; 
margin-top:0px;
}

#conteudo {
width:930px;
margin:0 auto;
padding:15px;
}

#conteudo #left p {
text-indent:10px;
line-height:25px;
}

#left {
width:700px;
float:left;
}

#right {
width:200px;
float:right;
height:152px;
}

#right a {
background-image:url(../img/orcamento.png);
background-repeat:no-repeat;
display:block;
width:200px;
height:69px;
}

#right a.orcamento {
background-position:0 0;
}

#right a.orcamento:hover {
background-position:0 -71px;
}

.clear {
clear:both;
}

#footer {
width:100%;
height:320px;
background-image:url(../img/footer.jpg);
border-top:1px solid #a9a8a8;
}
#rodape {
width:960px;
margin:0 auto;
}

#esquerda {
color:#fff;
margin:20px 0 0 0;
font-size:16px;	
width:320px;
float:left;
}
#direita {
width:483px;
background-image:url(../img/onibus.png);
height:224px;
float:right;
margin:50px 0 0 0;
}
#esquerda form {
margin:10px 0 0 0;
}


#esquerda label {
vertical-align:top;
width:100px;
height:32px;
}


#esquerda .campo {
width:310px;
height:30px;
display:block;
margin:0 0 10px 0;
padding:0 5px 0 5px;
font-family:Avant;
font-size:14px;
color:#333;
}

#esquerda textarea {
width:310px;
height:80px;
display:block;
margin:0 0 10px 0;
padding:5px 5px 0 5px;
font-family:Avant;
font-size:14px;
color:#333;
}


#esquerda a {
background-image:url(../img/enviar.png);
background-repeat:no-repeat;
display:block;
width:99px;
height:26px;
float:right;
}


#esquerda a.telefone {
background-position:0 0;
}

#esquerda a.telefone:hover {
background-position:0 -27px;
}

#footer2 {
background-color:#006080;
height:70px;
color:#fff;
border-top:1px solid #a9a8a8;
}
#cont-footer2 {
width:960px;
margin:0 auto;
padding-top:12px;
}
#empresa {
width:400px;
float:left;
padding:10px 0 0 0;
}

#autor {
width:400px;
text-align:right;
float:right;
}

 

Ô MAN, FOI MAL

 

SEGUE O CSS

 

@charset "utf-8";
/* CSS Document */

*{
margin:0;
padding:0;
border:0;
}

@font-face {
font-family: Avant;
src: url(../font/Avant.eot);
}
@font-face {
font-family: Avant;
src: url(../font/Avant.woff);
}
@font-face {
font-family: Avant;
src: url(../font/Avant.ttf);
}


body {
background-color:#fff;
font-size:14px;
color:#333;
font-family:Avant;
}

#topo {
width:100%;
background-image:url(../img/topo.jpg);
height:144px;
}

#cont-topo {
width:960px;
margin:0 auto;
padding:25px 0 0 0
}

#logo {
float:left;
}

#contato {
float:right;
}

#menu {
width:100%;
height:38px;
background-image:url(../img/menu.png);
}

#sprite {
width:960px;
padding:0;
margin:0 auto;
}

#sprite li {
float:left;
list-style:none;
}

#sprite li a {
background-image:url(../img/sprite.png);
background-repeat:no-repeat;
display:block;
width:160px;
height:37px;
}


#sprite li a.home {background-position:0 0;}
#sprite li a.home:hover { background-position:0 -40px;}
#sprite li a.quem {background-position:-160px 0;}
#sprite li a.quem:hover {background-position:-160px -40px;}
#sprite li a.viagem {background-position:-320px 0;}
#sprite li a.viagem:hover {background-position:-320px -40px;}
#sprite li a.fretado {background-position:-480px 0px;}
#sprite li a.fretado:hover {background-position:-480px -40px;}
#sprite li a.frota {background-position:-640px 0px;}
#sprite li a.frota:hover {background-position:-640px -40px;}
#sprite li a.fale {background-position:-800px 0px;}
#sprite li a.fale:hover {background-position:-800px -40px;}



#sprite li a#selected1 {
background-position:0 -40px;
}


#slider {
height:400px;
width:100%;
border-bottom:1px solid #d7d6d6;
}

/*#slider img {
	position:relative; 
	left:0; 
	top:0; 
	margin-left:-155px; 
	margin-top:0px;
}
*/
#slideshow{
width:100%;
height:400px;
}

#slideshow img {
position:relative; 
left:0; 
top:0; 
margin-left:-310px; 
margin-top:0px;
}

#conteudo {
width:930px;
margin:0 auto;
padding:15px;
}

#conteudo #left p {
text-indent:10px;
line-height:25px;
}

#left {
width:700px;
float:left;
}

#right {
width:200px;
float:right;
height:152px;
}

#right a {
background-image:url(../img/orcamento.png);
background-repeat:no-repeat;
display:block;
width:200px;
height:69px;
}

#right a.orcamento {
background-position:0 0;
}

#right a.orcamento:hover {
background-position:0 -71px;
}

.clear {
clear:both;
}

#footer {
width:100%;
height:320px;
background-image:url(../img/footer.jpg);
border-top:1px solid #a9a8a8;
}
#rodape {
width:960px;
margin:0 auto;
}

#esquerda {
color:#fff;
margin:20px 0 0 0;
font-size:16px;	
width:320px;
float:left;
}
#direita {
width:483px;
background-image:url(../img/onibus.png);
height:224px;
float:right;
margin:50px 0 0 0;
}
#esquerda form {
margin:10px 0 0 0;
}


#esquerda label {
vertical-align:top;
width:100px;
height:32px;
}


#esquerda .campo {
width:310px;
height:30px;
display:block;
margin:0 0 10px 0;
padding:0 5px 0 5px;
font-family:Avant;
font-size:14px;
color:#333;
}

#esquerda textarea {
width:310px;
height:80px;
display:block;
margin:0 0 10px 0;
padding:5px 5px 0 5px;
font-family:Avant;
font-size:14px;
color:#333;
}


#esquerda a {
background-image:url(../img/enviar.png);
background-repeat:no-repeat;
display:block;
width:99px;
height:26px;
float:right;
}


#esquerda a.telefone {
background-position:0 0;
}

#esquerda a.telefone:hover {
background-position:0 -27px;
}

#footer2 {
background-color:#006080;
height:70px;
color:#fff;
border-top:1px solid #a9a8a8;
}
#cont-footer2 {
width:960px;
margin:0 auto;
padding-top:12px;
}
#empresa {
width:400px;
float:left;
padding:10px 0 0 0;
}

#autor {
width:400px;
text-align:right;
float:right;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaue Machado    0

Kaue Machado
Postado

É isso que está errado?

http://d.pr/iTvF

 

 

Se for isso, eu vejo 2 soluções (eu só sei dessas, talvez alguem conheça outra):

 

1) limite o tamanho do slider a 960px:

 

#slider {
       height:400px;
       width:960px;
       margin: 0 auto;
       border-bottom:1px solid #d7d6d6;
}

 

nesse caso você vai ter que mudar o tamanho das imagens pra 960px também. Vai funcionar em qualquer resolução maior que 1024x768.

 

2) Altere o tamanho das imagens para 1980px de largura(resolução máxima) e use elas de background em tags <span>:

<div id="slider">

         <div id="slideshow">

         <span style="background:url(/img/1.jpg)" />

         <span style="background:url(/img/2.jpg)" />

         <span style="background:url(/img/3.jpg)" />

     </div>

</div>

 

nesse caso tem que definir o css tambem:

 

slideshow span{
width: 100%;
height: 400px;
background-image: center center no-repeat;
display: block;
}

 

desse jeito vai funcionar em qualquer resolução, mesmo menores que 1024x768, sempre exibindo tela cheia e a imagem será sempre centralizada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoyalFlush    0

RoyalFlush
Postado

Olá's

 

Outra solução é definir a largura das imagens do slider em porcentagem, com minimo e maximo em px.

 

ficaria mais ou menos assim:

 

#slider img{
 width:100%;
 min-width: 100px;
 max-width: 1024px;
}

 

 

O problema de fazer isso é que dependendo do tamanho da imagem esse redimensionamento pode perder qualidade, teste, teste, teste :P

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

CARA, EU TE AMO KKK

EU JA ESTAVA QUASE TIRANDO ESSE EFEITO E DEIXANDO UM BANNER FIXO,

EU ESTAVA PENSANDO MESMO EM DEIXAR 960PX DE LARGURA, PORÉM IRIA FICAR FEIO, MAIS AGORA SUAVE, DEU CERTO !

 

 

ME EXPLICA POR FAVOR PORQUE AGORA DEU CERTO ?

 

 

VALEO MAN, NOIXXX

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaue Machado    0

Kaue Machado
Postado

CARA, EU TE AMO KKK

EU JA ESTAVA QUASE TIRANDO ESSE EFEITO E DEIXANDO UM BANNER FIXO,

EU ESTAVA PENSANDO MESMO EM DEIXAR 960PX DE LARGURA, PORÉM IRIA FICAR FEIO, MAIS AGORA SUAVE, DEU CERTO !

 

 

ME EXPLICA POR FAVOR PORQUE AGORA DEU CERTO ?

 

 

VALEO MAN, NOIXXX

 

Qual deu certo? Os 960px ou width 100%?

Não sou bom em explicações objetivas, mas vamos lá:

 

Primeiro você tem que entender que a <div> do slider está usando uma medida relativa, de 100%, o tamanho dela vai variar de acordo com a resolução do usuário, então se a resolução do usuário é 1280x768, o width dessa div vai ser de 1280px.

Você estava usando uma tag <img> antes, acontece que com a tag <img> não da pra você centralizar a imagem dentro da <div> se a imagem for maior que a <div>, no caso quando um usuário com resolução 1024x768 abre seu site, o tamanho da div é 1024px, a imagem que você usava tinha 1500px (exemplo), então a div vai começar a cortar sua imagem da direita para esquerda até encaixar nos 1024px dela. Agora, se sua <div> tem 1280px e sua imagem 960px, a imagem encaixa dentro da <div>, então pode ser centralizada normalmente. Esse foi o porque de não funcionar antes.

 

O motivo de funcionar agora é que o background se ajusta dentro da div, se você definir a posição como "center center" ele vai sempre centralizar, então se tiver uma imagem de 1980px, e o texto na imagem tiver 960px e estiver no centro, quando a div tiver 1024px, ela vai cortar as laterais, mas o conteúdo importante vai estar centralizado.

 

Como eu disse, não sei explicar objetivamente, o texto foi bem grande =]

espero ter ajudado, abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito