This guide walks you through setting up a carousel-style gallery using Notion and custom scripts in Super. By combining a specific Notion structure with injected code in Super, you can transform a standard gallery into an interactive carousel.
Step 1: Set Up Your Gallery in Notion
To ensure the carousel works properly, your Notion layout needs to follow a specific structure.
1. Create a Callout
Start by adding a Callout block on your Notion page. This will act as the container for your carousel.
Set the callout background color to brown
(This is required for the script to detect and apply the carousel styling.)
2. Add a Gallery Database
Create a Gallery database inside the callout (recommended size: Medium)
Add a new property:
Type: Checkbox
Name it exactly:
super:noclick
This property disables the default click behavior, which is necessary for the carousel interaction.
3. Upload your Image
Once everything is set:
Ensure your content is properly populated
Head over to Super and refresh your site to apply changes
Step 2: Add Carousel Scripts in Super
To enable the carousel functionality, you’ll need to inject both the required script and styles into your Super site.
Option 1: Official Super Snippets
Add the following:
Code → Body
<script src="https://sites.super.so/snippets/v2/carousel.js"></script>
<script src="https://melvinsuper.github.io/super.so/carousel.js"></script>
Code → Head
<link rel="stylesheet" href="https://sites.super.so/snippets/v2/carousel.css">
<link rel="stylesheet" href="https://melvinsuper.github.io/super.so/carousel.css">
This is how it should function on the live site:
