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%)?