Ir para conteúdo

POWERED BY:

Arquivado

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

vânia Rocha

Como fazer com que o slideshow ocupe toda a largura do site?

Por , em Desenvolvimento frontend

Recommended Posts

vânia Rocha    0

vânia Rocha
Postado

Olá, estou tentando alterar o slideshow na minha loja no site Iluria, preciso de ajuda pra que ele ocupe toda a largura do site exemplo:

http://velo.iluria.com/

 

 

 

<iluria.if.slideshow.is.enabled>
<link rel="stylesheet" href="$iluria.template-assets-url/jquery.nivo.slider.3.2/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="$iluria.template-assets-url/jquery.nivo.slider.3.2/nivo-slider.css" type="text/css" media="screen" />
<script src="$iluria.template-assets-url/jquery.nivo.slider.3.2/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<style>
.theme-default .nivoSlider { box-shadow: none; }
.theme-default .nivo-controlNav { padding: 10px 0px 0px 0px; }
.theme-default .nivoSlider {
position:relative;
background:url('$iluria.template-assets-url/spinner-5.gif') no-repeat 50% 50%;
min-height: 100px;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.slider-wrapper {
position: relative;
margin: 0px 0px 20px 0px;
}
.nivo-controlNav {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 10000;
}
#slider { display: block; margin: 0px; padding: 0px; }
</style>
<div class="slider-wrapper theme-default top-image">
<div id="slider" class="nivoSlider">
<iluria.if.v2.slideshow.has.image1>
<iluria.if.v2.slideshow.image1.has.link>
<a href="$iluria.v2.slideshow.image1.link" target="$iluria.v2.slideshow.image1.target.link"><img src="$iluria.v2.slideshow.image1.url" border=0/></a>
</iluria.if.v2.slideshow.image1.has.link>
<iluria.if.v2.slideshow.image1.has.not.link>
<img src="$iluria.v2.slideshow.image1.url" />
</iluria.if.v2.slideshow.image1.has.not.link>
</iluria.if.v2.slideshow.has.image1>

<iluria.if.v2.slideshow.has.image2>
<iluria.if.v2.slideshow.image2.has.link>
<a href="$iluria.v2.slideshow.image2.link" target="$iluria.v2.slideshow.image2.target.link"><img src="$iluria.v2.slideshow.image2.url" border=0/></a>
</iluria.if.v2.slideshow.image2.has.link>
<iluria.if.v2.slideshow.image2.has.not.link>
<img src="$iluria.v2.slideshow.image2.url" />
</iluria.if.v2.slideshow.image2.has.not.link>
</iluria.if.v2.slideshow.has.image2>

<iluria.if.v2.slideshow.has.image3>
<iluria.if.v2.slideshow.image3.has.link>
<a href="$iluria.v2.slideshow.image3.link" target="$iluria.v2.slideshow.image3.target.link"><img src="$iluria.v2.slideshow.image3.url" border=0/></a>
</iluria.if.v2.slideshow.image3.has.link>
<iluria.if.v2.slideshow.image3.has.not.link>
<img src="$iluria.v2.slideshow.image3.url" />
</iluria.if.v2.slideshow.image3.has.not.link>
</iluria.if.v2.slideshow.has.image3>

<iluria.if.v2.slideshow.has.image4>
<iluria.if.v2.slideshow.image4.has.link>
<a href="$iluria.v2.slideshow.image4.link" target="$iluria.v2.slideshow.image4.target.link"><img src="$iluria.v2.slideshow.image4.url" border=0/></a>
</iluria.if.v2.slideshow.image4.has.link>
<iluria.if.v2.slideshow.image4.has.not.link>
<img src="$iluria.v2.slideshow.image4.url" />
</iluria.if.v2.slideshow.image4.has.not.link>
</iluria.if.v2.slideshow.has.image4>

<iluria.if.v2.slideshow.has.image5>
<iluria.if.v2.slideshow.image5.has.link>
<a href="$iluria.v2.slideshow.image5.link" target="$iluria.v2.slideshow.image5.target.link"><img src="$iluria.v2.slideshow.image5.url" border=0/></a>
</iluria.if.v2.slideshow.image5.has.link>
<iluria.if.v2.slideshow.image5.has.not.link>
<img src="$iluria.v2.slideshow.image5.url" />
</iluria.if.v2.slideshow.image5.has.not.link>
</iluria.if.v2.slideshow.has.image5>
</div>
</div>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: '$iluria.slideshow.effect', // Specify sets like: 'fold,fade,sliceDown'
pauseTime: ($iluria.slideshow.time * 1000), // How long each slide will show
prevText: 'Anterior', // Prev directionNav text
nextText: 'Próximo', // Next directionNav text
afterLoad: function() {
$(".theme-default .nivoSlider").css("background-image", "none");
}
});
});
</script>
</iluria.if.slideshow.is.enabled>
​

 

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Cruz    0

Leandro Cruz
Postado

Olá, estou tentando alterar o slideshow na minha loja no site Iluria, preciso de ajuda pra que ele ocupe toda a largura do site exemplo:

http://velo.iluria.com/

 

 

 

<iluria.if.slideshow.is.enabled>

<link rel="stylesheet" href="$iluria.template-assets-url/jquery.nivo.slider.3.2/themes/default/default.css" type="text/css" media="screen" />

<link rel="stylesheet" href="$iluria.template-assets-url/jquery.nivo.slider.3.2/nivo-slider.css" type="text/css" media="screen" />

<script src="$iluria.template-assets-url/jquery.nivo.slider.3.2/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<style>

.theme-default .nivoSlider { box-shadow: none; }

.theme-default .nivo-controlNav { padding: 10px 0px 0px 0px; }

.theme-default .nivoSlider {

position:relative;

background:url('$iluria.template-assets-url/spinner-5.gif') no-repeat 50% 50%;

min-height: 100px;

}

.theme-default .nivoSlider img {

position:absolute;

top:0px;

left:0px;

display:none;

}

.theme-default .nivoSlider a {

border:0;

display:block;

}

.slider-wrapper {

position: relative;

margin: 0px 0px 20px 0px;

}

.nivo-controlNav {

position: absolute;

bottom: 10px;

right: 10px;

z-index: 10000;

}

#slider { display: block; margin: 0px; padding: 0px; }

</style>

<div class="slider-wrapper theme-default top-image">

<div id="slider" class="nivoSlider">

<iluria.if.v2.slideshow.has.image1>

<iluria.if.v2.slideshow.image1.has.link>

<a href="$iluria.v2.slideshow.image1.link" target="$iluria.v2.slideshow.image1.target.link"><img src="$iluria.v2.slideshow.image1.url" border=0/></a>

</iluria.if.v2.slideshow.image1.has.link>

<iluria.if.v2.slideshow.image1.has.not.link>

<img src="$iluria.v2.slideshow.image1.url" />

</iluria.if.v2.slideshow.image1.has.not.link>

</iluria.if.v2.slideshow.has.image1>

<iluria.if.v2.slideshow.has.image2>

<iluria.if.v2.slideshow.image2.has.link>

<a href="$iluria.v2.slideshow.image2.link" target="$iluria.v2.slideshow.image2.target.link"><img src="$iluria.v2.slideshow.image2.url" border=0/></a>

</iluria.if.v2.slideshow.image2.has.link>

<iluria.if.v2.slideshow.image2.has.not.link>

<img src="$iluria.v2.slideshow.image2.url" />

</iluria.if.v2.slideshow.image2.has.not.link>

</iluria.if.v2.slideshow.has.image2>

<iluria.if.v2.slideshow.has.image3>

<iluria.if.v2.slideshow.image3.has.link>

<a href="$iluria.v2.slideshow.image3.link" target="$iluria.v2.slideshow.image3.target.link"><img src="$iluria.v2.slideshow.image3.url" border=0/></a>

</iluria.if.v2.slideshow.image3.has.link>

<iluria.if.v2.slideshow.image3.has.not.link>

<img src="$iluria.v2.slideshow.image3.url" />

</iluria.if.v2.slideshow.image3.has.not.link>

</iluria.if.v2.slideshow.has.image3>

<iluria.if.v2.slideshow.has.image4>

<iluria.if.v2.slideshow.image4.has.link>

<a href="$iluria.v2.slideshow.image4.link" target="$iluria.v2.slideshow.image4.target.link"><img src="$iluria.v2.slideshow.image4.url" border=0/></a>

</iluria.if.v2.slideshow.image4.has.link>

<iluria.if.v2.slideshow.image4.has.not.link>

<img src="$iluria.v2.slideshow.image4.url" />

</iluria.if.v2.slideshow.image4.has.not.link>

</iluria.if.v2.slideshow.has.image4>

<iluria.if.v2.slideshow.has.image5>

<iluria.if.v2.slideshow.image5.has.link>

<a href="$iluria.v2.slideshow.image5.link" target="$iluria.v2.slideshow.image5.target.link"><img src="$iluria.v2.slideshow.image5.url" border=0/></a>

</iluria.if.v2.slideshow.image5.has.link>

<iluria.if.v2.slideshow.image5.has.not.link>

<img src="$iluria.v2.slideshow.image5.url" />

</iluria.if.v2.slideshow.image5.has.not.link>

</iluria.if.v2.slideshow.has.image5>

</div>

</div>

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider({

effect: '$iluria.slideshow.effect', // Specify sets like: 'fold,fade,sliceDown'

pauseTime: ($iluria.slideshow.time * 1000), // How long each slide will show

prevText: 'Anterior', // Prev directionNav text

nextText: 'Próximo', // Next directionNav text

afterLoad: function() {

$(".theme-default .nivoSlider").css("background-image", "none");

}

});

});

</script>

</iluria.if.slideshow.is.enabled>

 

Olá Vânia!

 

Por favor, gostaria de saber se você conseguiu solução para sua postagem, pois estou com mesmo problema.

 

Não consigo fazer que o SlideShow ocupe toda largura da Loja Virtual.

 

Teria como me ajudar por favor?

 

Desde já agradeço. Tenha um Ano Novo super abençoado por DEUS.

 

Grato,

 

Leandro

​

 

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mari RF    0

Mari RF
Postado

Leandro e Vania,


Tenho a mesma dúvida, conseguiram resolver?

Grata.

Mari

 

Só trocar os valores da largura por 100% que vai ficar em 100% em relação a página. ^^

O slideshow está dentro do Canvas, neste caso o slideshow iria ocupar 100% do Canvas e não da página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mari RF    0

Mari RF
Postado

L. Henrique,

Fiz isso e deu certo, apesar de ter ficado uma pequena margem, mas as outras seções ficaram todas alinhadas à esquerda e/ou ocupando a página inteira. Fiz algumas tentativas de mudança, mas não deram certo. Tem algum código que alinhe tudo de uma só vez?

Grata.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Mari,

As margens você pode anular com propriedades como margin: 0; e/ou padding: 0; - Todos os elementos do HTML tendem a ficar alinhados a esquerda, a não ser que você mude isso com um float, right, position, etc...

 

Tente adicionar algumas dessas propriedades dentro do canvas, ou até mesmo o margin e padding zero no body pra anular o da página inteira.

Não tenho um código que alinhe tudo de uma só vez, até porque esse código é seu e não sei como você o está estruturando, então tente adicionar essas propriedades e me avise caso tenha dado errado ou certo.

Qualquer coisa sinta-se livre pra me chamar pelo Facebook, minha disponibilidade lá é maior. (Está no meu perfil o link).

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mayara Machado    0

Mayara Machado
Postado

Mari,

As margens você pode anular com propriedades como margin: 0; e/ou padding: 0; - Todos os elementos do HTML tendem a ficar alinhados a esquerda, a não ser que você mude isso com um float, right, position, etc...

Tente adicionar algumas dessas propriedades dentro do canvas, ou até mesmo o margin e padding zero no body pra anular o da página inteira.

Não tenho um código que alinhe tudo de uma só vez, até porque esse código é seu e não sei como você o está estruturando, então tente adicionar essas propriedades e me avise caso tenha dado errado ou certo.

Qualquer coisa sinta-se livre pra me chamar pelo Facebook, minha disponibilidade lá é maior. (Está no meu perfil o link).

L. Henrique, você pode me ajudar?

coloquei width: 100% no canvas, mas fica tudo alinhado à esquerda.

tento colocar position:absolute; position:relative; Float: left; float: right... mas nenhum desses centraliza o slideshow.

pesquisando na internet, achei o código CSS

#tudo {

width: 760px;

margin:0 auto;

}

e o slideshow fica exatamente como eu quero, mas as categorias e os produtos ficam totalmente desalinhados. Existe algum código que me ajude a solucionar meu problema?

Segue o código do canvas que eu tô editando:

#canvas {

width: 100%;

position: relative;

margin: auto;

margin-bottom: $iluria.layout.main.container.margin.bottom ;

margin-top: $iluria.layout.main.container.margin.top ;

/* box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.2); */

}

#canvas-inner{

padding: 0px 35px;

background-color: $iluria.layout.mainContainer.backgroundColor;

}

#canvas-inner-header {

display: table;

width: 100%;

}

#canvas-inner-body {

padding-bottom: 20px;

width: 910px;

max-width: 100%;

display: table;

float: left;

}

#canvas-inner-footer {

padding: 35px 35px;

width: 908px;

margin: auto;

}

.canvas-body {

display: table;

}

.canvas-border

{

border: 1px $iluria.layout.mainContainer.borderColor $iluria.layout.mainContainer.borderStyle;

box-shadow: 0px 0px 10px $iluria.layout.main.container.shadow.color;

border-radius: $iluria.layout.main.container.border.radius;

overflow: hidden;

}

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