I am trying to find an elegant solution with little JavaScript to create carousel which can have one or multiple columns. With a click on the buttons, it should scroll to the next column(s).
Idea (too much JS in my opinion):
- Create a grid
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - With JavaScript find out how many columns there currently are and fill grid
- Resizing: We need a ResizeObersiver to find out if the number of columns change when the user resizes the window and adjust the content. -> Ugly
I am trying to find a solution to avoid using a ResizeObserver. Ideally something where css automatically takes care of the number of columns and column widths and side scrolling without complicated JS logic. Anyone has a elegant solution?
You need to sign in to view this answers
