Create a dynamic carousel gallery in Super by structuring your Notion gallery inside a styled callout block and adding simple custom scripts—no advanced coding required.
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:
