This custom code transforms a Notion Gallery view into a full-width, continuously moving carousel with curved top and bottom edges.
The carousel is responsive, supports horizontal dragging, pauses when hovered on desktop, and respects reduced-motion settings. Card titles and enabled gallery properties remain visible.
Meet our Team
Simon
Full-stack Developer
Spain
Denice
Customer Service
France
Nicole
Customer Service
Germany
Melvin
Technical Support
The Philippines
Recommended setup
- Use a Notion database with a Gallery view.
- Set the card size to Large.
- Include at least 3 cards.
- Multiple Large Galleries with different card counts are supported.
- Other gallery sizes are not affected.
Note: Carousel cards are intentionally non-clickable. Card links and image-lightbox actions are disabled.
Code scope
Install both snippets at the same scope:
- Add both globally if the carousel should be available site-wide.
- Add both at page level if it should run only on a specific page.
Installation
- Open your site in the Super Dashboard.
- Go to the Code section.
- Add this stylesheet to the Head:
- Add this script to the Body:
- Save your changes.
- Refresh the live page.
<link rel="stylesheet" href="https://sites.super.so/carousel/animated-v2.css"><script src="https://sites.super.so/carousel/animated-v2.js"></script>Behavior and limitations
- Visitors can drag the carousel horizontally.
- Automatic movement pauses on pointer hover.
- Galleries with fewer than 3 cards are not converted.
- The hover effect only applies to devices that support hovering. Other devices are unaffected.