Scrollable gallery cards

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

1. Open your Notion page and make sure the database is using a Small Gallery view.
2. Open your site in the Super Dashboard.
3. Go to Code.
4. In the Head tab, paste the CSS snippet below.
Copy

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/scrolling-gallery/scroll.css">

5. In the Body tab, paste the JavaScript snippet below.
Copy

<script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/scrolling-gallery/scrolling.js"></script>

6. Save your changes.
7. Open your Super site and refresh the page.

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