The most straight forward way to do this is to use css scroll snap. You can read about it on mdn. You could import a large library called swiperjs if you wanted but I think that is overkill for this. If you want indicator dots to show what slide you are on you need to use the javascript intersection observer api.
Topic summary
Goal: Make a single Rich Text section swipeable on mobile (horizontal scroll) without affecting other pages, working within character limits or via Edit Code. Current CSS styles links (buttons) in .rich-text; a screenshot is provided.
Suggestions offered:
- Use CSS scroll snap (built-in CSS feature) for swipe-like behavior; refer to MDN docs.
- SwiperJS (a carousel library) is possible but likely overkill for this use case.
- For indicator dots showing the current slide, use the JavaScript Intersection Observer API (detects which element is in view).
Additional guidance:
- For horizontal scrolling, one reply notes you may not need scroll snap; try adding overflow-y: auto and test placement in DevTools by inspecting the DOM and applying CSS live.
Open questions:
- Whether using a Multicolumn section with extra CSS to make boxes smaller would achieve the goal.
- Step-by-step for implementing a basic horizontal scroll in the Dawn theme; no code example provided yet.
Status: No implementation or final decision yet; discussion remains open with recommended approaches but no resolved steps.