4

Preciso criar um slide com duas divs. Fiz um aqui só que está aparecendo uma barra de scroll em baixo, olhem o JSFiddle.

HTML

<div class="carrousel">
    <div class="item active" id="about">
        <p class="red">Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui </p>
        <a href="#" id="for_a">Ir para Artistas</a>
    </div>
    <div class="item" id="artists">
        <p>Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui </p>
        <a href="#" id="for_b">Ir para About</a>
    </div>
</div>

JS

$(document).ready(function(){

    $("#for_a").click(function(){
        $("#about").animate({
            left: "-100%"
        }, 1000)

        $("#artists").animate({
            left: "0px"
        }, 1000)
    })

    $("#for_b").click(function(){
        $("#artists").animate({
            left: "100%"
        }, 1000)
        $("#about").animate({
            left: "0px"
        }, 1000)
    })
})

CSS

.carrousel{
    overflow: hidden;
}

.item{
    float: left;
    width: 100%;
    position: absolute;
    display: inline;
    left: 100%;  
}
.active{
    display: block;
    left: 0;
}
.nav{
    margin-top: 150px;
}
.red{
    background: red;
}

Como fazer para que não apareça a barra de scroll e que seja todo fluido (100%)?

1 Resposta 1

6

Aqui fica uma sugestão com algumas alterações (http://jsfiddle.net/UwB64/3/):

  • adicionei mais uma div, um embrulho do que já tinha. Assim fica mais fácil ter o embrulho com width: 100% e overflow: hidden;, e dentro dele ter então uma div com 200%.
  • Sendo que esta nova div tem 200% ot .item passam a ter 50% cada
  • retirei o position: absolute; e usei o anomate no margin-leftem vez de no left

HTML

<div class="carrouselWrapper">
    <div class="carrousel">
        <div class="item active" id="about">
            <p class="red">Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui</p> <a href="#" id="for_a">Ir para Artistas</a>

        </div>
        <div class="item" id="artists">
            <p>Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui</p> <a href="#" id="for_b">Ir para About</a>

        </div>
    </div>
</div>

jQuery

$(document).ready(function () {

    $("#for_a").click(function () {
        $("#about").animate({
            marginLeft: "-100%"
        }, 1000)

        $("#artists").animate({
            marginLeft: "0px"
        }, 1000)
    })

    $("#for_b").click(function () {
        $("#artists").animate({
            marginLeft: "100%"
        }, 1000)
        $("#about").animate({
            marginLeft: "0px"
        }, 1000)
    })
})

CSS

.carrouselWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.carrousel {
    width: 200%;
}
.item {
    float: left;
    width: 50%;
    display: inline;
}
.active {
    display: block;
    left: 0;
}
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .