Как сделать слайдер с полосой прокрутки?

Question

[pavuuuk]

slider.onmousedown = function(e) {

	const coords	      = getCoords(this); //Координаты подзунка
	const shiftX    	  = e.pageX - coords.left;
	const scrollbarCoords = getCoords(scrollbar); // Координаты полосы прокрутки

	document.onmousemove = function(e) {

		let newLeft = e.pageX - scrollbarCoords.left - shiftX; 
		
		if (newLeft < "25") {
			container.style.transform = `translateX(0px)`;
			newLeft = "25"
		};

		if (newLeft > scrollbar.offsetWidth - slider.offsetWidth - 25) {

			newLeft = scrollbar.offsetWidth - slider.offsetWidth - 25;
			container.style.transform = `translateX(-${container.scrollWidth - container.offsetWidth}px)`;

		}

		container.style.transform = `translateX(-${/* Как вычислить это значение? */}px)`; // Двигаем контейнер
		slider.style.left = newLeft + "px"; // Двигаем ползунок

		document.onselectstart = function() {
			return false;
		};

	}

	document.onmouseup = function () {
		document.onmousemove = slider.onmouseup = null;
		document.onselectstart = function() {
			return true;
		};
    }
}

Мне нужен какой-то индекс, который будет увеличиваться по мере прокрутки ползунка. Не знаю, как ещё объяснить(

Answer 1

[Lord_Dantes]

Сделайте блоку снизу скролл и стилизуйте его, вам и слайдер :)

Comments

[pavuuuk]

Так я уже и сделал. А вот как двигать контейнер?

[Lord_Dantes]

pavuuuk, Что двигать?
overflow-x: scroll ?

[pavuuuk]

slave, Я хочу, чтобы контейнер, в котором лежат все эти слайды двигался зависимо от движения ползунка. То есть, если полузнок будет на половине полосы прокрутки, то контейнер соответственно тоже сдвинется на половину. Не знаете, как такое сделать? Если подогнать значение, то будет не адаптивно