Hi, I am trying to learn how to build a carousel. But I got into a problem. I managed to make the carousel to work. Although the second and 3rd img are invisible and I don’t know why. JavaScript seems to be alright. Is there a CSS problem?
@SempervivumJul 22.2019 — #You arranged the slides one upon the other by absolute positioning. However your code indicates that you intend to make a sliding transition, not fading.
Remove the absolute positioning and arrange the slides side by side through `display: flex;`. Set the width of the ul to 300%. This is a rought improvement:
@codyhillauthorJul 22.2019 — #@Sempervivum#1606598 I wanted to position them next to each other with javaScript. That's why I wrote this const setSlidePosition = (slide, index) => { slide.style.left = slideWidth * index + 'px'; };. I will play with the positioning and I'll come back if it doesn't work.
@codyhillauthorJul 22.2019 — #@Sempervivum#1606600 Fixed the issue. The problem was that the li did not have a width and height. The problem is that I don't know how to make it jump to the first img after the last one.