When clicking, the value of translateX needs to be changed with each click. Now the event is triggered once. The problem is that I don’t know how to pass the value of a css property to a variable ...

<script type="text/javascript"> $('.znSlickNav-prev').click(function () { $('.slick-track').css("transform","translateX(-"+333+"px)"); }) </script>

It is necessary that with each click translateX increased by 333px

    2 answers 2

     var tr = 0; $('.znSlickNav-prev').click(function(){ tr += 333; $('.slick-track').css("transform","translateX(-"+tr+"px)"); });

    Connect jQuery before the script.

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    • Thank you so much, but you can still help, also a question on the slide, you need to make a smooth switch between the two lists ... - ilyaaa521
    • probably you will be interested in the function animate () jquery - Predaytor
    • demo.kallyas.net/sneakers-shop - look, please, can such switching be done via animate ()? Just there, when we click on the button, we set the event to animate (), it will remove one list, but I need the second list to appear immediately ... - ilyaaa521

    The problem of the approach taken from the accepted answer is that assigning the transform value to the css property translate "breaks" other element transformations (for example, rotation).

    There is a more flexible way. Modern browsers support the DOMMatrix interface, which is designed specifically for working with transformations.
    You can read more about it, for example, on MDN (en) .

    Or, you can use the following simple helpers that change the value of the transformation through matrix() :

     class CssTransform2d { constructor(element) { this.el = element; } get matrix() { let tm = getComputedStyle(this.el).getPropertyValue('transform').match(/\((.*)\)/); return (tm ? tm[1] : '1,0,0,1,0,0').split(/,\s*/).map(v => +v); } set matrix(v) { this.el.style.transform = `matrix(${v.join(', ')})`; } get translate() { return this.matrix.slice(-2); } set translate(xy) { this.matrix = [...this.matrix.slice(0, 4), ...xy]; } get translateX() { return this.matrix[4]; } set translateX(v) { this.matrix = [...this.matrix.slice(0, 4), v, this.matrix[5]]; } get translateY() { return this.matrix[5]; } set translateY(v) { this.matrix = [...this.matrix.slice(0, 4), this.matrix[4], v]; } } /*--------------------- использование ---------------------*/ const ct = new CssTransform2d($('#box')[0]); console.log(ct.matrix.join(', ')); $('.btn-move').click(function () { const $this = $(this); let [x, y] = ct.translate; switch ($this.data('direction')) { case '<': x -= 30; break; case '>': x += 30; break; case '∧': y -= 30; break; case '∨': y += 30; } ct.translate = [x, y]; console.clear() || console.log(ct.matrix.join(', ')); }); 
     .btn-move { width: 2rem; height: 1.7rem; } .btn-move::after { content: attr(data-direction); display: inline; } #btns { position: relative; z-index: 99; } #box { width: 3rem; height: 3rem; background: #4d4; transition: transform 0.15s linear; transform: translate(10rem, 20vh) rotate(45deg); } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="btns"> <button class="btn-move" data-direction="&lt;"></button> <button class="btn-move" data-direction="∧"></button> <button class="btn-move" data-direction="∨"></button> <button class="btn-move" data-direction="&gt;"></button> </div> <div id="box"></div>

    (The code in the example works only with a 2D transform, while DOMMatrix supports three-dimensional ones. Plus, the standard interface offers much more features, and it is not written on the knee :) )