The slider element in Instant allows you to create carousels and slideshows for showcasing multiple pieces of content. This guide covers inserting sliders, configuring settings, styling controls, and creating responsive slider layouts.
Adding a Slider to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Find Slider Presets
Navigate to Interactive. Under this category, you'll find two slider presets:
Preset | Description |
Carousel | Pre-configured for horizontal scrolling galleries |
Slideshow | Pre-configured for full-width presentations |
Both presets have the same settings available—they're simply configured differently by default.
Step 3: Place on Canvas
Drag either preset onto your canvas. A layer group called Slider will be inserted.
Slider Structure
View the slider's structure in the Layer panel in the left sidebar. The slider contains two main groups:
Group | Contents |
Slides | Contains all individual slide layers |
Controls | Contains navigation arrows and pagination bullets |
Configuring Slides
Click on the Slides layer to access slider settings in the right sidebar under the Slider header.
Preview Controls
Previous / Next buttons — Preview slides sequentially
Slide number — Jump directly to a specific slide
Direction
Set the slider scroll direction:
Option | Behavior |
Horizontal | Slides move left and right |
Vertical | Slides move up and down |
Align
Control how slides are aligned within the container:
Option | Behavior |
Top | Slides align to the top edge |
Center | Slides align to the center |
Bottom | Slides align to the bottom edge |
Fill Container | Slides stretch to fill the entire container height |
Snapping
Define where slides snap into position:
Option | Behavior |
Start | Slides snap to the start of the viewport |
Center | Slides snap to the center of the viewport |
None | Free scrolling without snap points |
Gap
Set the spacing between slides in pixels.
Animation
Click to open the animation popover with these options:
Setting | Description |
Speed | Control the transition speed between slides |
Loop | Enable continuous looping through slides |
Autoplay | Automatically advance slides |
Important: Loop requires a minimum of 5 slides to function correctly. With fewer slides, the loop may skip slides unexpectedly.
Slide Size
Choose how slide widths are determined:
Option | Behavior |
Automatic | Width calculated based on number of slides setting |
Manual | Each slide width must be set individually |
Number of Slides
Define how many slides are visible at once within the slider viewport. This option appears when Slide Size is set to Automatic.
Controls
The Controls layer contains two sub-layers for slider navigation.
Navigation (Arrows)
The navigation layer contains arrow elements for previous/next navigation.
Positioning Options
Method | Behavior |
Relative | Arrows position relative to their place in the layer hierarchy |
Absolute | Arrows can be placed anywhere within the slider container |
Note: Navigation arrows only function when positioned within the slider container.
Pagination (Bullets)
The pagination layer contains bullet indicators showing the current slide position.
Bullet Styling Options
Property | Description |
Fill Color | Set the default bullet color |
Radius | Adjust the bullet corner roundness |
Opacity | Control bullet transparency |
Spacing | Add or remove space between bullets |
Active State Styling
Select the bullets element
Navigate to the Interactions tab in the right sidebar
Under Effects, find Active State
Set the color for the currently active bullet
Adding Slider Elements
Adding New Slides
Method 1: Right-click on the Slides container and select Add New Slide from the dropdown.
Method 2: Click on the slider container, then use the add options to select Add Slides.
Adding Controls
Click on the slider container to access these options:
Add Navigation — Insert arrow controls
Add Pagination — Insert bullet indicators
Add Thumbnails — Insert thumbnail navigation
Responsive Settings
Slider settings can be configured differently for each viewport.
Example: Responsive Slide Count
Viewport | Number of Slides |
Desktop | 3 slides |
Tablet | 2 slides |
Mobile | 1 slide |
To configure:
Select the Slides layer
Set Number of Slides for desktop
Switch to tablet viewport and adjust the value
Switch to mobile viewport and adjust again
Responsive Slide Size
You can also switch between Manual and Automatic slide size per viewport for maximum flexibility.
Advanced Styling: Active Slide Effects
Create visual distinction for the currently active slide using interaction effects.
Setting Up Active Slide Scaling
Select an individual Slide layer
Navigate to the Interactions tab in the right sidebar
Click on Effects
Select Active State
Set Scale to a value like 105%
The active slide will now appear 5% larger than surrounding slides.
Tip: This effect works especially well with center snapping and loop enabled—the focused middle slide grows larger than adjacent slides.
Note: This setting must be applied to each individual slide layer for the effect to work consistently across all slides.
Quick Reference
Task | Location |
Insert slider | Insert panel → Interactive → Carousel or Slideshow |
Configure slides | Select Slides layer → Right sidebar → Slider header |
Set direction | Slider settings → Direction |
Enable loop | Slider settings → Animation → Loop (min 5 slides) |
Set autoplay | Slider settings → Animation → Autoplay |
Adjust gap | Slider settings → Gap |
Set slides visible | Slider settings → Number of Slides |
Style bullets | Select Pagination → Adjust fill, radius, opacity, spacing |
Style active bullet | Pagination → Interactions → Effects → Active State |
Add new slide | Right-click Slides container → Add New Slide |
Add navigation | Click slider → Add Navigation |
Scale active slide | Select Slide → Interactions → Effects → Active State → Scale |
Make responsive | Switch viewport → Adjust settings per breakpoint |