я в процессе создания слайдера, и у меня проблема со стилем,
У меня есть 3 слоя div,
- Первый div для установки ширины и высоты ползунка
- второй div, являющийся контейнером содержимого, в этом div я выполняю все действия
- Содержание divs
Или здесь:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function animate(element) {
var start = new Date();
var id = setInterval(function() {
var timePassed = new Date() - start;
var progress = timePassed / 600;
if (progress > 1) progress = 1;
element.style.marginLeft = -50 * Math.pow(progress, 5)+"px";
if (progress == 1) {
clearInterval(id);
}
}, 10);
}
</script>
<style type="text/css">
#slider {
overflow: hidden;
width: 50px;
height: 50px;
}
#container {
min-width: 100px;
height: 50px;
float:left;
}
.content {
width: 50px;
height: 50px;
float:left;
}
</style>
</head>
<body>
<div id="slider">
<div id="container" onclick="animate(this)">
<div class="content" style="background-color:blue;"></div>
<div class="content" style="background-color:pink;"></div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
Так в чем же проблема?
ширина контейнера Контейнера должна быть достаточно большой, чтобы идеально содержать все элементы содержимого,
например, если у меня есть 3 элемента содержимого внутри контейнера, мне нужно, чтобы контейнер был как минимум установлен шириной 150 пикселей (потому что ширина содержимого содержимого равна 50 пикселей), иначе он будет портиться и разрыв строки
Если Контейнер недостаточно велик, элементы содержимого будут разрываться, и все ползунки будут испорчены, необходимо знать, что я не знаю, сколько элементов содержимого будет напечатано в элемент контейнера, поэтому Контейнер div должен содержать все из них без разрыва строки и как-то быть динамическим
как я могу это исправить? заранее спасибо !!