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

Question

[struhovv]

Подскажите, как сделать прокрутку в блоке, кликая на кнопки "вперед" "назад"?

Сейчас клик срабатывает только один раз. Внутри блока еще один блок с width 200%. Нужно при клике добавлять transform +- 10%, не выходя за пределы 0-200%

Comments

[scottparker]

добавь переменную с процентом translate, и изменяй ее при клике (с проверкой)

Answer 1

[roman_kichatkin]

Начнем с того, что ты явно указываешь transform, хотя по логике нужно указывать так
Текущий transform +-5%

Я бы на твоем месте transform не использвал, ибо манипулировать им в jQuery не очень удобно.
Сделай для .blog__categories position: relative и рули left и right соответственно, следовательно получив ширину этого блока, ты можешь понять границы, за которые эти left и right не должны выходить

Comments

[struhovv]

Спасибо, поменял position и left right. Подскажи пожалуйста как задать нужный диапазон? Не очень понимаю

let offset = 0,
width = $('.blog__categories').width();


$('.navi_next').click(function () {
    offset -= 20;
    $('.blog__categories').css("left", offset + '%');
  
});
$('.navi_prev').click(function () {

    if ($('.blog__categories').css("left", "0%")) {
         offset = 0;
    }else{
        offset += 20;
        $('.blog__categories').css("left", offset + '%');
    }
 
});

[roman_kichatkin]

Алгоритм такой
1) при клике на next проверяешь left у .blog__categories
2) если он <= 100% то задаешь ему left, который будет равен текущему его left + смещение
3) Иначе ничего не делаешь

С prev аналогично, но в другую сторону
Ключевой момент - чтобы смещение работало не один раз тебе в $('.blog__categories').css("left", ) нужно указывать текущий left + смещение (например, 5%)

const left = parseInt($('.blog__categories').css('left'));
$('.blog__categories').css("left",   `${left + 5}%`)

Answer 2

[Надим]

Используйте jQuery.animate:
https://basicweb.ru/jquery/jquery_effect_animate.php