Ir para conteúdo
Fórum CódigoFonte.net
  • Anúncios

    • codigofonte

      Novo Fórum

      Pessoal, Atualizamos nossa versão do fórum para a mais recente da Invision Power. Como tínhamos uma versão muito antiga, talvez algumas áreas possam funcionar de forma errada ou com problemas, gostaria de pedir-lhes a compreensão, pois iremos resolvendo aos poucos. Até mais!
iaramslima

ILURIA: como fazer slideshow ocupar toda a largura da página

Recommended Posts

Oi, boa noite!

Estou fazendo uma loja online usando a plataforma Iluria e, depois de algumas tentativas, não consigo fazer com que o slideshow ocupe toda a largura da tela. Alguém poderia me ajudar?

Segue o código do canvas:

#canvas {
    width: 980px;
    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;
}

 

Segue o código do slideshow (em HTML):

 

<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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×