Slideshow with text controls

Overview

The Slideshow with text controls section lets you create visually rich, responsive slideshows that combine text, images, and videos with accessible navigation. It’s ideal for showcasing promotions, sharing your brand story, or highlighting key collections in an engaging, mobile-friendly layout. Customize animation, navigation, and transitions to match your brand style and guide visitors through your content seamlessly.

⚠️ Important: Slideshow with text controls unites flexible text, visuals, and navigation to deliver a consistent, accessible experience on every device.

Slideshow settings

These settings define the overall look and behavior of your slideshow. Adjust transitions, autoplay, and navigation to create smooth movement, strong visual impact, and an engaging rhythm that suits your brand.

1. Animation style
   Choose the transition between slides.

   • default — Classic horizontal sliding.

   • fade — Smooth cross-fade.
     Default: default

2. Animation speed
   Set how quickly slides move or fade.
   Range: 0.1–5 s; Step: 0.1; Default: 0.8 s

3. Autoplay delay
   Define how long each slide stays visible before changing automatically (when autoplay is enabled).
   Range: 0–10 s; Step: 1; Default: 4 s

4. Autoplay slideshow
   Enable automatic slide rotation for a continuous experience.
   Default: Disabled

5. Controls position (horizontal)
   Choose where navigation arrows appear.

   1. Left — Controls on the left.

   2. Right — Controls on the right.
      Default: left

6. Pagination style
   Pick the visual indicator for slide progress.

   1. Dynamic

   2. Fraction (e.g., 1 / 5)

   3. Progress bar

   4. Scrollbar

7. Show navigation
   Toggle arrow navigation for manual slide browsing.
   Default: Enabled

8. Show pagination
   Display dots, numbers, or progress bars to show slide position.
   Default: Disabled

📝 Note: Adjust animation and navigation for tone and pacing — quick transitions and progress bars feel energetic, while fade and fraction styles suit more refined or editorial designs.

Supported block types

The Slideshow with text controls section supports the Slide block, allowing you to blend media and messaging for maximum flexibility.

1. Add slides featuring headings, text, icons, overlays, or videos.

2. Adjust visibility and layout for desktop and mobile views.

3. Reorder or duplicate slides easily to keep content fresh and on-brand.

💡 Tip: Refresh slides regularly and experiment with navigation or preview options to keep your presentation interactive and engaging.

Usage notes

1. Responsive design — Slides automatically adapt to all screen sizes for smooth browsing.

2. Performance — Optimize image and video sizes for faster loading and smoother transitions.

3. Accessibility — Add descriptive alt text, clear captions, and maintain high contrast. Keep both navigation and pagination visible for manual control.

4. Testing — Preview across multiple devices to ensure clarity, animation smoothness, and consistent spacing.

⚠️ Important: Test your slideshow frequently to ensure fast performance, readability, and seamless navigation. Thoughtful setup creates a dynamic, accessible experience that highlights your most important content.

Would you like me to include the “Show preview of next slides” option (as in your earlier version) in this one too for completeness?

ChatGPT can make mistakes. Check important info. See Cookie Preferences.