Увеличение margin-left по средством js и проверка?

Question

[valitskiydmitriy]

Использую вот такой код для увеличения параметра margin-left, для работы слайдера, анимация через css:

next.onclick = function() {
            slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft) -216 + 'px';
    }

Здесь добрый человек подсказал код, который запретит листать слайдер в обратную сторону, и будет обнулять значение margin-left по достижении максимальной величины:

var max = 1000;

if (x < 0) {
    x = max;
} else if (x > max) {
    x = 0;
}

И никак не получаеться совместить их, подскажите как лучше сделать? Пока получилось что то типо этого:

next.onclick = function() {
        var max = 1000;
        x +=216;
        if (x < 0) {
            x = max;
        } else if (x > max) {
            x = 0;
        }

            slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft) -x + 'px';
    }

Answer 1

[Виталий Инчин ☢]

x = x <= 0 ? max : x >= max ? 0 : x+216;

Comments

[valitskiydmitriy]

Спасибо! Но судя по всему ошибка где то здесь "x => max" ну и ничего не работает

[Виталий Инчин ☢]

valitskiydmitriy: Если клик по next прибавляет по 216, зачем вы проверяете на x < 0?

[valitskiydmitriy]

Виталий Инчин: Хм действительно. В консоли "Uncaught ReferenceError: x is not defined" если вписать var x = 0; он просто прибавляет 1000пикселей

[valitskiydmitriy]

Виталий Инчин: Поправил, спасибо!

[valitskiydmitriy]

Виталий Инчин: Но толку от использования проверки нет, что в обратную сторону крутит, что до бесконечности :(

[Виталий Инчин ☢]

valitskiydmitriy: Может быть, вы хотели написать

document.getElementById('slideimg').style.marginLeft = x + "px";

?

[valitskiydmitriy]

Виталий Инчин: Тогда листает только один слайд, т.е по сути прибавляет значение только один раз

[valitskiydmitriy]

Виталий Инчин: И все равно при значении margin-left 0 листает в обратную сторону, а не должен, уже и не знаю как сделать

[Виталий Инчин ☢]

valitskiydmitriy: x где объявлена? вне функции? Должна быть вне - иначе значение не сохранится, хотя я бы сделал и без нее.

[Виталий Инчин ☢]

valitskiydmitriy: типа

next.onclick = function(){
   var i = slideimg.style;
   i.marginLeft = i.marginLeft >= max ? 0 : i.marginLeft+216;
}

[Виталий Инчин ☢]

valitskiydmitriy: И еще, лучше использовать transform и translateX().

[valitskiydmitriy]

Виталий Инчин: Все никак не работает :С Только листает, сейчас все выглядит вот так:

next.onclick = function() {
        var max = 1000;
        var x=1;
        x = x <= 0 ? max : x >= max ? 0 : x+216;
        slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft) -x + 'px';
    }
    prew.onclick = function() {
        var x = 1;
        var max = 1000;
        x = x <= 0 ? max : x >= max ? 0 : x+216;
        slideimg.style.marginLeft = parseInt(document.getElementById('slideimg').style.marginLeft)+x  + 'px';
    }

[Виталий Инчин ☢]

valitskiydmitriy: Можете скинуть слайдер целиком на jsFiddle или CodePen, так как я понятия не имею что такое slideimg, prew, next и прочее.