Хочу сделать прокрутку галереи. Делаю div фиксированной ширины с overflow:hidden, а внутри него двигаю div с картинками, изменяя свойство left. Внутренний div должен по ширине вмещать все картинки. Пытаюсь задать ширину - для всех детей суммирую outerWidth(true) и присваиваю контейнеру, но он получается
уже, последняя картинка переносится ниже.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Галерея</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"</script>
</head>
<body>
<div id="container">
<img src='1.jpg' />
...
<img src='10.jpg' />
</div>
<script type="text/javascript">
w = 0;
$('#container').children().each(function(i,o){w += $(o).outerWidth(true)});
$('#container').width(w);
</script>
</body>
</html>
Между картинками есть расстояние, которое не учитывается, хотя padding border margin равны нулю. Написал w += $(o).outerWidth(true)+5, теперь ширина вроде подходящая, но меня пугает дикая константа, боюсь что в других условиях может поползти.
Почему так происходит и как следует поступить? Может, есть другой способ задать ширину? Может, есть другой способ сделать прокрутку?