GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Aumentar tamanho das imagens do carousel

html
css
html5
Tags: #<Tag:0x00007ff78be85370> #<Tag:0x00007ff78be85208> #<Tag:0x00007ff78be850c8>

#1

Estou desenvolvendo uma aplicação web e gostaria que o meu carrossel com as imagens ocupasse toda a largura da pagina e ficasse colada no menu mas a um espaço entre o o menu e o carousel,e o carousel não ocupa toda pagina.

Olha como esta a minha pagina

HTML

<section id="slider"><!--slider-->
<div class="conteudo_carousel">
    <div class="row">
        <div class="col-sm-12">
            <div id="slider-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#slider-carousel" data-slide-to="1"></li>
                    <li data-target="#slider-carousel" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">


                            <img src="imagens/fullimage1.jpg" alt="The Last of us" class="girl img-responsive" style="width:1700px;"/>


                    </div>
                    <div class="item">


                            <img src="imagens/fullimage1.jpg" alt="The Last of us" class="girl img-responsive" style="width:1700px;" />


                    </div>

                    <div class="item">


                            <img src="imagens/fullimage1.jpg" alt="The Last of us" class="girl img-responsive" style="width:1700px;"/>


                    </div>

                </div>

                <a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
                    <i class="fa fa-angle-right"></i>
                </a>
                <a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
                    <i class="fa fa-angle-left"></i>
                </a>
            </div>

        </div>
    </div>
</div>
  </section><!--/slider-->   

CSS

#slider {
    padding-bottom: 45px;
}

.carousel-indicators li {
    background: #C4C4BE;
}

.carousel-indicators li.active {
    background: #FE980F;
}



.girl {
    margin-left: 0;
}




.get {
    background: #FE980F;
    border: 0 none;
    border-radius: 0;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin-top: 23px;
}




.control-carousel {
    position: absolute;
    top: 50%;
    font-size: 60px;
    color: #C2C2C1;
}

.control-carousel:hover{
    color: #FE980F ;
}

#2

Como sua imagem está com a classe girl, você pode fazer da seguinte forma no seu css

.girl {
margin-left: 0; // nao sei pra que está usando, entao mantem
width: 100%;
}

referente a margem entre o menu e o carrousel tem que ver o que vc está fazendo, como vc está incluindo aquele menu?

mas na sua classe get tem um margin-top de 23px, tira ela que deve resolver o problema