How to create a slide with two divs?

Question

How to create a slide with two divs?

Navigation

#1 by (6 votes)

4

I need to create a slide with two divs. I made one here just a scroll bar is coming down, look at the 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;
}

How do you make sure that the scroll bar does not appear and that it is all fluid (100%)?

html jquery css slider

asked by anonymous 29.05.2014 / 23:21

1 answer

Set CSS according to browser Change "copy" to "copied" in clipboard.js after click

score 6 · Accepted Answer

Here is a suggestion with some changes ( link ):

I added another div, a bundle of what I already had. This makes it easier to have the wrapper with width: 100% and overflow: hidden; , and inside it you have a div with 200% .
Being that this new div has 200% ot .item they get 50% each
I removed the position: absolute; and used the anomate in margin-left instead of 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;
}