Слайдер JQuery в качестве временной шкалы

Question

Я только что закончил включать аккордеон jQuery со слайдером jQuery.Т.е. отображаются

3 картинки.Пользователь может использовать кнопки PREV или NEXT для просмотра следующих / предыдущих 3 изображений.Они также могут перемещаться по всем изображениям с помощью ползунка.

Следующий шаг - сделать этот ползунок похожим на временную шкалу.Левая сторона должна начинаться в 1970 году и заканчиваться в 2010 году. Для каждого элемента (в данном случае это набор из 3 изображений), мне нужно, чтобы он отображал дату на временной шкале.

, то есть:

Я знаю, что мог бы создать изображение с датами, расположенными на правильной ширине, но в идеале это должно быть динамическим, чтобы можно было добавлять больше элементов и обновлять временную шкалу.

Answer 1

На высоком уровне должно работать следующее:

1. Получите общую ширину элемента пользовательского интерфейса ползунка в пикселях.
2. Разделите это число на [total number of labels] - 1, чтобы получить общее количество пикселей для каждой метки.
3. Добавьте серию div сразу после div слайдера с шириной, полученной на шаге 2, и стилем float:left.
4. Следуйте за всем с пустым div в стиле clear: both.

Вот базовый пример:

CSS

.timeline {
    width: 500px;
    border: 1px solid black;
}
.timelineEntry {
    float: left;
}
.first {
    position: relative; left: 5px;
}
.last {
    position: relative; left: -10px;
}
.clear {
    clear: both;
}

Разметка

<div id="timelineContainer">
    <div class="timeline" id="slider">
        Slider UI Goes Here
    </div>
</div>
<div class="clear"></div>

JavaScript

var container = document.getElementById("timelineContainer");
var labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var totalWidth = $("#slider").width();
var labelWidth = Math.floor(totalWidth / (labels.length - 1));
for (var index = 0; index < labels.length; index++) {
    var nextLabel = document.createElement("div");
    nextLabel.className = "timelineEntry";
    if (index == 0) {
        nextLabel.className += " first";
    }
    else if (index == labels.length - 1) {
        nextLabel.className += " last";
    }
    nextLabel.style.width = labelWidth + "px";
    nextLabel.innerHTML = labels[index];
    container.appendChild(nextLabel);
}