Dynamic translate3d by adding a number per click

Question

Hi so I'm trying to simulate arrows in a slider, where I move the elements to the left and right.

So far I have the items moving to the right but only once.

https://i.gyazo.com/34a0ef4a5064c2942aca7c717a775e8b.mp4

Here is my code so far

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    const now = "740";

    arrowRight.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d(" + -now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d("+ +now+", 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>

So I'm trying to add and remove now which is 740 on click, so add 740 every time I click right and remove when I click left until it resets to 0px.

So I click right once 740 again 1460 etc and the reverse when the user clicks the left arrow.

Answer 1

Every time you click on one of the arrows you should increment/decrement the value of now:

<script>
    (function(){
        const arrowLeft = document.querySelector('#video-tags-left');
        const arrowRight = document.querySelector('#video-tags-right');
        const tags = document.querySelector('.video-tags');
        const SLIDER_WIDTH = 740;
        let now = 0;

        arrowRight.addEventListener("click", function() {
            now -= SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d(" + now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });

        arrowLeft.addEventListener("click", function() {
            now += SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d("+ now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });
    }());
</script>

Take into account that you will also have to check the limits of your slider so that you can not move the slider to sections where there is no content.

Answer 2

Here are some problems with your code:

1. You declared "now" as const, therefore it's value cannot be changed
2. You declared "now" as type string, therefore you cannot do any mathematical operations with it (such as incrementing or decrementing)

Change your code to this:

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    let now = 740; // Declare "now" as variable of type number

    arrowRight.addEventListener("click", function() {
      now += 740; // Increment "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      now -= 740; // Decrement "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>