За что отвечает данная строчка кода?

Question

[AlexWebDev]

Есть код.
HTML:

<div class="slider">
	<div class="viewport">
		<div class="slide-wrapper">
			<div class="slide"><img src="" alt=""></div>
			<div class="slide"><img src="" alt=""></div>
			<div class="slide"><img src="" alt=""></div>
			<div class="slide"><img src="" alt=""></div>
		</div>
	</div>
</div>

JS:

function next() {
if (slideNow == slideCount || slideNow > slideCount || slideNow <= 0) {
$(".slide-wrapper").css({
"transform": "translate(0,0)"
});
slideNow = 1;
} else {
let width = -$(".viewport").width() * (slideNow);
console.log(width);
$(".slide-wrapper").css({
"transform": "translate("+width+"px,0)"
});
slideNow++;}

Делал слайдер по образу и подобию, и пытаюсь разобраться с этой строчкой:
let width = -$(".viewport").width() * (slideNow);
Что она означает на простом языке? Просто на том ресурсе, откуда я брал этот слайдер, не сказано подробно что она делает. Я знаю что она берет значение ширины, необходимой для перемотки, но для чего там умножение? Что оно дает?

Comments

[Rustam Bainazarov]

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

Answer 1

[ilyamst51]

ширина = -ширинаСлайдера * текущийОткрытыйСлайд
Допустим
Слайдер - 1000пикселей
Сейчас открыт второй слайд.
Чтобы открыть третий слайд, надо первый слайд сдвинуть на -2000px
Поэтому мы и имеем такую формулу

Answer 2

[alex-1917]

Вместо

if (slideNow == slideCount || slideNow > slideCount || slideNow <= 0)

можно так
if (slideNow >= slideCount || slideNow <= 0)