@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;
		};
    }
}

5d52d73e55994378203883.png
Мне нужен какой-то индекс, который будет увеличиваться по мере прокрутки ползунка. Не знаю, как ещё объяснить(
  • Вопрос задан
  • 33 просмотра
Пригласить эксперта
Ответы на вопрос 1
Lord_Dantes
@Lord_Dantes
Сделайте блоку снизу скролл и стилизуйте его, вам и слайдер :)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы