why my image slider is not working ,it is not working in javascript but it works in css as a property

Question

why this sliding is not working I couldn't understand., when I click on div(nex) it translateX(-100%)

with javascript ,but when I use this property transform:translateX(-100%) in css it work ,why is so and explain also.

please give a proper explaination and in details, write how you do it

kindly help me in this matter

https://www.w3schools.com/code/tryit.asp?filename=GQIAF87KZ1YE

Answer 1

all your <img> have same id value but id are intended to be unique ^^

getElementById select only the first element with matching id so you apply the transformation to only the first <img>

you could apply the transform to all <img> by using querySelectorAll, wich return an array-like of the matching elements:

document.querySelectorAll('#images').forEach(
img => img.style.transform = "translateX(-100%)"
);

you should rather use class name than id if you want to give same identifier to all your <img>, as you cannot be sure that it will works fine in all browsers or in future with unique id (or you could use a more valid query string to target your <img>, such as ".slider img")

anyway, it would work only once, as you must give -200% the second time, -300% the third, and so on ;P (each time you set a style property it will replace the previous value, rather than being cumulative): see the below modified code to view a way to handle both buttons...

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

Answer 2

Thank a lot ,visph your explanation is very good