Menu
Hi,
I need to build this carousel but I have a lot of trouble making it responsive.
What I would like is when there are 3 cards in a slide when the button is pressed all 3 of them move out of the container and on mobile if there is only one card when the button is pressed only one should move.
I tried doing it by separating the big slide and the cards and run javascript for each using matchMedia() but I didn’t even get to that as I have some other bugs.
Another problem I have is when the width of the windows is resized the first element is getting out of the view, plus for some reason, they do not fit the way that they should fit inside the slider. The container is blue and you can see that the first and last card is outside the container.
I tried to position them with javascript but then, after I position the cards too, the second pair of cards (second slide) is pushed way out to the left. I think is because it also calculates the with of the slider.
This is the codepen: