Слайд divs в одной строке

Question

Как сделать divs скользить в одной строке на кнопку влево/вправо?
Что-то вроде this нижней части галереи

это моя попытка в JSFiddle

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

Answer 1

Здесь обновляется FIDDLE.

Вместо left собственности попробовать с scrollLeft:

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

Это дает большое преимущество, что вам не нужно, чтобы проверить, если коробки будут идти над максимально допустимое положение.

Вам также необходимо изменить 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; 
} 

Самое главное здесь (необходимо для механизма работы), являются overflow: hidden, white-space: nowrap в .box классе и display: inline-block в .block классе.