Multi column slider

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