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

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 :)

CodePudding user response：

You can increment a variable to do it.

Tell me if it solve your problem.

let tNum = 0;

$(".arrowLeft").on("click", function () {
  // change "20" by 200 in your project
  tNum = tNum   20;
  console.log(tNum);
  $("div.slider div p").css('transform', 'translate(-'   tNum   '%, -'   tNum   '%)');
})

.arrowLeft { position:absolute; left:250px;top:10px }
div.slider div p { width:200px; height:200px; background:grey }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >Click</div>

<div ><div><p>P</p></div></div>

CodePudding user response：

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..