JavaScript how to keep it moving?

Question

On this code I made, there are left and right buttons. The buttons are supposed to move the cards to the left or to the right. But it only moves them once.
(I used transform translate ().
I was wondering how I would keep it moving every time the right/left buttons are clicked. And also set a limit to where it can't be moved after it reaches certain distance or after so many clicks.

If you don't understand the question please let me know.
https://code.sololearn.com/W87bA267g1FA/?ref=app

Answer 1

remove your previous css completely, we start from scrap

now step 2

.container {
border:2px solid purple;
position:relative;
transition:left 500ms;
height:350px;
display:flex;
width:750px;
}

.card {
border:1px solid pink;
width:250px;
height:350px;
}

Answer 2

The translate doesn't transition them slowly, but instantly. For this kind of animation, I recommend using JS, with intervals, so you can stop it anywhere you want

Answer 3

I don't want to step on Gordon 's toes, but if you want to set a limit on how far it can go, you should use JS

Answer 4

I made a small demo in JS
https://code.sololearn.com/WI0W6ZcS7x61/?ref=app

Answer 5

Airree 's pure JS way is easier to understand. amd more fit for your question. I think it is better for you to mark his answer as best.

My way is combination of CSS and JS, I'll find some readings for you.

Answer 6

<div class="card" >
not
<div id="card" >

setting same id for more than one element will cause problem

Answer 7

now in css

.container { /* for your current html, use #water instead */
border : 2px solid red;
}

.card {
border : 1px solid blue;
}

these borders are for studying the element position and size, they are temporary and we will remove them at last

Answer 8

your previous margin-top margin-left float remove all these.

the size of body we don't need too.

Answer 9

https://code.sololearn.com/W94TZ209D5CS/?ref=app

sorry i got something to do in life.

previous step 3 not working because left is not initially set as 0.

left is just the same as right.

set left of container as multiple card width in px.

transition of css property make it an animation.

Answer 10

You can begin by reading this lesson about Transition in w3school
https://www.w3schools.com/css/css3_transitions.asp

Answer 11

Ginfio yes it'll be easier to start again from blank code.

Firstly, build the HTML structure. One parent to contain the cards. Use class names for elements with same behaviour.

Then, the CSS.
The parent has position absolute and left 0
The parent has transition : left 1500ms
The child has width and height.

Then, the JS.
set the left of the container as multiple of width of child.

You can use non-ES6 syntax, it works too. My functions actually do the same thing as your original functions, the reason there is animation instead of jumping instantly is the CSS property transition.

Answer 12

it's too early to bother about best answer or not yet

Answer 13

no float

use flex on parent instead

https://code.sololearn.com/WxDA4Rvt8wlJ/?ref=app

Answer 14

and here is step 3 for the js

https://code.sololearn.com/W8hN6fY28VUx/?ref=app

you can try to complete it by adding function left

Answer 15

use transition of css

you need to redo the html, the css and the js

follow my steps one by one:

Step 1. in html

div class container
div class card
div class card
div class card

do it and show the code here, then we do step 2

Answer 16

ok, let me do that real quick.

Answer 17

for the container, id water ok
but for the child, dont id, use class

Answer 18

Step 1 ✔️ Done (id = class.?)

Answer 19

ok

Answer 20

Gordon, set up good?