Первый слайдер на js. Как ограничить переключение?

Question

[colorkid]

Всем привет. Изучаю javascript. Вот решил попробовать сделать собственный слайдер.
вот он https://jsfiddle.net/colorkid/cxqru4jr/

моя первая проблема заключается в том, что я никак не могу понять, как сделать так, что-бы при sliderStyle.style.left = 0; увеличивать его до 400 и далее нельзя, и наоборот при sliderStyle.style.left = -1200; его нельзя было уменьшать. Т.е. когда я нажимаю на кнопку переключателя то sliderStyle смещается в право и в лево, и за данными числами (400 и -1200) он продолжает смещаться, а там ничего нет.

Как поставить ограничения на sliderStyle.style.left?
Или же как ограничить количество кликов(запуска функции) sliderLength.length??(что предпочтительнее, так как заранее я не знаю сколько будет слайдов)

Answer 1

[Денис Инешин]

Это делается довольно просто. Вы не должны прямо так сразу менять значение left.

var x = 0;

$prev.on("click", left);

function left () {
    x = x - 100; // сдвигаем слайдер на 100 пикселей
    if (x < -400) {
        x = -400; // если мы достигли какого-то минимально значения, то дальше запрещаем движение
    }
    
    sliderStyle.style.left = x + "px"; //  и только после предыдущей проверки, записываем значение
}

Comments

[colorkid]

Благодарю. Поковырялся в Вашем коде, прикрутил, все как и хотел, вроде даже понял как это работает. Еще раз спасибо.