CODEWITHSUNDEEP
jquerycss
Ivan
Ivan

Reputation: 131

Slide divs in single row

How to make divs slide in single row on button left/right click?
Something like this bottom part of a gallery

this is my attempt in JSFiddle

$( "#right" ).click(function() {
    $( ".block" ).animate({ "left": "+=50px" }, "slow" );
    });
    $( "#left" ).click(function(){
    $( ".block" ).animate({ "left": "-=50px" }, "slow" );
    });

Upvotes: 0

Views: 684

Answers (1)

matewka
matewka

Reputation: 10148

Here's updated FIDDLE.

Instead of left property try with scrollLeft:

$( "#right" ).click(function() {
    $( ".box" ).animate({
        scrollLeft: '+=' + $( ".box" ).width()
    });
});
$( "#left" ).click(function(){
    $( ".box" ).animate({
        scrollLeft: '-=' + $( ".box" ).width()
    });
});

That gives you the great advantage that you don't need to check if the boxes will go over the maximum allowed position.

You will also need to modify CSS:

.box {
    width: 600px;
    background-color: #000;
    overflow:hidden;
    white-space: nowrap;
}
.block {
    display:inline-block;
    background-color: #abc;
    width: 90px;
    height: 90px;
    margin: 5px;
    margin-left: 10px;
}

Most important thing here (essential for the mechanism to work), are overflow: hidden, white-space: nowrap in .box class and display: inline-block in .block class.

Upvotes: 1

Related Questions