'How do i can add const % on click in transform:translate with jquery

Im trying to make easy slider, but i dont know if there is option to make a const "%" on click with transform:translate with jQuery.

There is my code:

$(".arrowLeft").on("click", function () {
    $('div.slider div p').css('transform', 'translate(-50%, -50%)')
})

and for example i want to add on every click "200%" to translateX. Is there any solution for this?

Thanks for answer :)

jquery


Solution 1:[1]

Thanks for answer. It works but only for one side. I want to make reviews slider, which 5/6 reviews whios we can skip with arrow from left to right. There is my code:

let tNum1 = -50;
let tNum2 = -150;
let tNum3 = -350;
let tNum4 = -550;
let tNum5 = -750;
let tNum6 = -950;

$('.arrowLeft').on('click', function () {
    tNum1 = tNum1 + 200;
    tNum2 = tNum2 + 200;
    tNum3 = tNum3 + 200;
    tNum4 = tNum4 + 200;
    tNum5 = tNum5 + 200;
    tNum6 = tNum6 + 200;
    console.log(tNum1);
    console.log(tNum2);
    console.log(tNum3);



    $('div.slider div p:nth-of-type(1)').css('transform', 'translate(-' + tNum1 + '%, -50%)');
    $('div.slider div p:nth-of-type(2)').css('transform', 'translate(-' + tNum2 + '%, -50%)');
    $('div.slider div p:nth-of-type(3)').css('transform', 'translate(-' + tNum3 + '%, -50%)');
    $('div.slider div p:nth-of-type(4)').css('transform', 'translate(-' + tNum4 + '%, -50%)');
    $('div.slider div p:nth-of-type(5)').css('transform', 'translate(-' + tNum5 + '%, -50%)');
    $('div.slider div p:nth-of-type(6)').css('transform', 'translate(-' + tNum6 + '%, -50%)');

})

$('.arrowRight').on('click', function () {
    tNum1 = tNum1 - 200;
    tNum2 = tNum2 - 200;
    tNum3 = tNum3 - 200;
    tNum4 = tNum4 - 200;
    tNum5 = tNum5 - 200;
    tNum6 = tNum6 - 200;
    console.log(tNum1);
    console.log(tNum2);
    console.log(tNum3);



    $('div.slider div p:nth-of-type(1)').css('transform', 'translate(+' + tNum1 + '%, -50%)');
    $('div.slider div p:nth-of-type(2)').css('transform', 'translate(+' + tNum2 + '%, -50%)');
    $('div.slider div p:nth-of-type(3)').css('transform', 'translate(+' + tNum3 + '%, -50%)');
    $('div.slider div p:nth-of-type(4)').css('transform', 'translate(+' + tNum4 + '%, -50%)');
    $('div.slider div p:nth-of-type(5)').css('transform', 'translate(+' + tNum5 + '%, -50%)');
    $('div.slider div p:nth-of-type(6)').css('transform', 'translate(+' + tNum6 + '%, -50%)');

})

Like i said, right to left works, but left to right.. Reviews stop in the middle of "div" and stack on each other..

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 joshmx

Related Questions