This custom code snippet converts a Super/Notion small gallery database view into a horizontal carousel.
It is useful when you want gallery cards to appear in one scrollable row. Visitors can browse the cards using the left and right navigation arrows.
Sample output:
MacBook Neo
New
Mac Air
New
iMac
Shop Mac
Compare
Studio
High Definition
Accessories
Test Page 9
Apple
Installation instructions
- Open your Notion page and make sure the database is using a Small Gallery view.
- Open your site in the Super Dashboard.
- Go to Code.
- In the Head tab, paste the CSS snippet below.
- In the Body tab, paste the JavaScript snippet below.
- Save your changes.
- Open your Super site and refresh the page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/scrolling-gallery/scroll.css"><script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/scrolling-gallery/scrolling.js"></script>Optional style customization
If you want to use dark mode for this gallery’s scrollable cards, go to Code > CSS in your Super dashboard and paste the custom CSS below.
html.theme-dark .notion-collection-gallery .notion-property__title,
html.theme-dark .notion-collection-gallery .notion-property__title span,
html.theme-dark .notion-collection-gallery .notion-semantic-string {
color: #f5f5f7 !important;
opacity: 1 !important;
}You can then update the values in the code to match your preferred design.
Important setup notes
- For best results, use a Small Gallery database view in Notion.
- The cards should have a visible image, such as a page cover or image preview.
- For a cleaner carousel, limit the visible database properties. Too many visible properties can make the cards taller or visually crowded.
- It should ignore table, list, board, and other non-gallery database views.
Notes and limitations
- If a gallery has fewer than two cards, the carousel will not be applied.
- If your site already has heavy custom CSS or JavaScript, additional testing may be needed.
- If the arrows do not appear, make sure the database view is a Small Gallery view and the JavaScript was added to the Body code section.
- After updating the code, refresh the live site to check the result.
- Best works on the Light Mode