I have a slider for 4 pictures. Each occupies 100% of the block. When you click next, it moves to the left by 100% and a new one appears.
var left = 0; document.getElementById("next").onclick = sliderLeft; function sliderLeft() { var polosa = document.getElementById("polosa"); var max_lenght = document.querySelectorAll(".image"); left = left - 100; if (left < max_lenght.length) { left = 0; } /* if (left <= -400) { left = 0; } */ polosa.style.left = left + "%"; } body{ display: flex; flex-direction:column; align-items:center; } img { float: left; width: 20%; } #slider { border: 3px solid black; overflow: hidden; max-width: 600px; } .arrows { margin-top: 60px; } #polosa { position: relative; display: inherit; transition: 1s ease; left: 0; width: 500%; } <div id="slider"> <div id="polosa"> <img class="image" src="https://images.unsplash.com/photo-1534106474077-f9e9c6f5a47c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93e4a52103a10a38beffb1c30bed41ba&auto=format&fit=crop&w=500&q=60" alt=""> <img class="image" src="https://images.unsplash.com/photo-1534076355207-1717511180ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dac3b914c452ddd9c6c51e1828ac0a76&auto=format&fit=crop&w=500&q=60" alt=""> <img class="image" src="https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt=""> <img class="image" src="https://images.unsplash.com/photo-1534083152091-df439a43a2b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bf58d027c1a0fbd9b92cd1de830438f&auto=format&fit=crop&w=500&q=60" alt=""> </div> </div> <div class="arrows"> <button id="prev">prev</button> <button id="next">next</button> </div>= "https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt = ""<div id="slider"> <div id="polosa"> <img class="image" src="https://images.unsplash.com/photo-1534106474077-f9e9c6f5a47c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93e4a52103a10a38beffb1c30bed41ba&auto=format&fit=crop&w=500&q=60" alt=""> <img class="image" src="https://images.unsplash.com/photo-1534076355207-1717511180ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dac3b914c452ddd9c6c51e1828ac0a76&auto=format&fit=crop&w=500&q=60" alt=""> <img class="image" src="https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt=""> <img class="image" src="https://images.unsplash.com/photo-1534083152091-df439a43a2b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bf58d027c1a0fbd9b92cd1de830438f&auto=format&fit=crop&w=500&q=60" alt=""> </div> </div> <div class="arrows"> <button id="prev">prev</button> <button id="next">next</button> </div>
In general, at the beginning when I scrolled through all the pictures I had a simple check if (left<= -400){left=0} and it went to the first picture. But let's say every time I will add a picture I don't want every time in the code change the numbers (from 400 to 500, from 500 to 600, etc.) I tried to make a variable in which all the pictures will be and in the check register a variable if (left < max_lenght.length) { left = 0; } if (left < max_lenght.length) { left = 0; } But it doesn't work for me.
