How to create an image slider (carousel)

In TeleportHQ, the Slider element creates a carousel that visitors can swipe or click through. Add Slider from Elements → Primitives → Interactive, then select it. In Slider Settings in the right panel, pick a Layout (for example Card carousel or Logo marquee), add slides, and turn on Autoplay, Pagination dots or Navigation arrows.

Before you start#

• The Slider element works in websites and web apps. You don't need custom code.
• Upload your pictures first, or plan to use stock photos. See How to upload images, videos and files.

1. Add the slider#

1. In the left sidebar, click Elements.
2. On the Primitives tab, scroll to the Interactive group.
3. Drag Slider onto the canvas, for example into your gallery section. Or select that section and click Slider: it goes inside it.

A slider is made of a Slider Wrapper with Slider Slide items, plus Slider Prev and Slider Next arrows and Slider Pagination dots. You see these names in the layers tree.

2. Choose a layout#

A layout sets, in one pick, how many slides show on each screen size, whether the slider moves by itself, which controls it has, and its size.

1. Select the slider. In the right panel, find Slider Settings.
2. Click the value next to Layout. It shows the layout your slider matches, or Custom.

3. Pick a layout from the list:
   • Full-screen hero: fills the screen, one slide at a time, arrows and bullets, loops.
   • Wide banner: full width, one slide, moves by itself every 5 seconds, bullets only.
   • Card carousel: three cards on desktop, two on tablet, one on mobile, with gaps.
   • Gallery strip: a row of pictures (four, three or two per width), arrows, no bullets.
   • Testimonials: one quote at a time, moves by itself every 6 seconds, bullets only.
   • Logo marquee: many small slides drifting by themselves, no arrows, no bullets.
   • Lightbox: one picture at a time with arrows and bullets.

Your slides keep their content and styling. Picture slides fill their new box without repeating. If you change any setting afterwards, Layout reads Custom.

3. Change the picture on each slide#

Each slide shows its picture as a background image.

1. Select the slider. In Slider Settings, click Next slide or Previous slide until the slide you want shows on the canvas.
2. In the layers tree, click that Slider Slide.
3. In the right panel, open Background and click the picture thumbnail, then pick a new image. Or right-click an image in the Assets Manager and choose Set as Background Image.

See How to change an element's background color, gradient or image.

To show text or a button on a slide, drag elements into the Slider Slide, for example a heading for a testimonial.

4. Add slides#

1. Select the slider.
2. In Slider Settings, click Add slide. A new slide with a sample photo is added.

To remove a slide, select the Slider Slide in the layers tree and press Delete.

5. Fine-tune how the slider behaves#

In Slider Settings:

• Autoplay: moves to the next slide by itself. When on, you can set Autoplay delay (ms) (for example 4000 for 4 seconds), Disable autoplay on interaction, Loop autoplay, Pause autoplay on mouse enter and Reverse autoplay direction.
• Pagination: shows dots (bullets) at the bottom of the slider.
• Navigation: shows previous and next arrows.
• Slides Per View: for desktop, tablet and mobile, set Items (how many slides show at once) and Gap (px) (the space between them). For a logo carousel, try 4 items on desktop and 2 on mobile.

6. Style the arrows and dots#

Select the slider, one of its arrows, or its Slider Pagination. The right panel shows:

• Arrows: Color and Size (px) for both arrows at once. Replace arrow opens the Icons tab of the Assets Manager: click an icon, and it becomes both arrows.
• Bullets: Color for the dots, Active for the current slide's dot, Size (px) and Gap (px).

To change an arrow's own box (its background, border or position), select that arrow and use the usual sections of the right panel.

Check that it worked#

On the canvas, use Next slide and Previous slide to check each slide. To see autoplay and swiping, preview your site. There is no in-canvas Preview button for sliders.

Troubleshooting#

The Next slide button is greyed out You're on the last slide, or all slides already fit in Items for desktop.

Autoplay delay shows in red The delay must be a number in milliseconds, for example 3000.

I don't want the arrows or dots Turn off Navigation (arrows) or Pagination (dots) in Slider Settings instead of deleting them.

Layout says Custom You changed a setting after picking a layout. Pick the layout again to go back to its settings.

Good to know#

• Slides from data: Bind to dynamic data fills the slides from a list, for example products or testimonials from a data source. Convert to static slides turns them back into regular slides. See How to show a list of items.
• Ready-made galleries are in Elements → Sections → Gallery. See How to add ready-made sections.
• A pop-up slider (Slider in the Modals group) is also available. It works in websites and web apps. See Which elements can I add to a page?