Image Slider

The Image Slider gallery type in Robo Gallery allows you to display images as a smooth, interactive slideshow. This layout is ideal for hero sections, portfolios, product showcases, and featured image blocks, where focus on one image at a time is important.

You can fully control the slider behavior, appearance, animations, and performance options directly from the gallery settings.

Creating an Image Slider#

To create a slider gallery:

1. Go to Robo Gallery → Add New Robo Gallery
2. In the gallery type selection dialog, choose Slider
3. Click Create Gallery
4. Add images using Manage Images
5. Configure slider options
6. Save and publish the gallery

Once published, the slider can be embedded using a shortcode, block, widget, or page builder.

General Slider Options#

Auto Width & Auto Height#

• Slider Auto Width Automatically adjusts the slider width to the container size.

• Slider Auto Height Automatically adapts slider height based on the current image.

These options are recommended for responsive layouts and dynamic page structures.

Image Ordering#

You can control the order of images in the slider using the Images order by option:

• Category
• Title
• Date
• Random

This allows you to dynamically change the slide sequence without reordering images manually.

Slider Image Quality#

Choose the image resolution used in the slider:

• Small
• Medium
• Large
• Full

💡 For full-width sliders or hero sections, Large or Full is recommended. For faster loading, especially on mobile, consider Medium.

Interface Options#

Navigation Buttons#

• Show / Hide navigation arrows
• Useful for manual slide control

Scrollbar#

• Optional scrollbar for navigating through slides
• Can be enabled or disabled depending on design needs

Animation Options#

Autoplay#

• Enable or disable automatic slide switching
• Ideal for banners and presentations

Direction#

• Horizontal – classic slider behavior
• Vertical – unique vertical slide transitions

Lazy Load & Preload Settings#

To improve performance and loading speed, the slider includes built-in lazy loading:

• Preload Off – images load only when needed
• Preload On – preloads upcoming slides
• LazyLoad Dark / Light – loading indicators styled for different backgrounds

Robo Gallery optimizes loading behavior to keep sliders smooth even with large images.

Content Panel Settings#

The slider supports an optional content panel displayed over images.

Content Panel#

• Show or hide the content panel
• Display text over the image

Content Source#

You can choose which image metadata to display:

• Title
• Caption
• Description

Content Panel Theme#

• Light
• Dark

This allows the content to stay readable regardless of image brightness.

Image Metadata Support#

Slider text is populated from image fields defined in the Media Manager:

• Title
• Caption
• Description
• Tags

This makes it easy to reuse the same images across different gallery types with different presentation styles.

Performance & Responsiveness#

The Image Slider:

• Is fully responsive
• Adapts to all screen sizes
• Supports touch gestures on mobile devices
• Uses optimized JS and CSS loading
• Works seamlessly with lazy loading and caching

When to Use Image Slider#

Image Slider is perfect for:

• Homepage hero sections
• Landing pages
• Product highlights
• Portfolios
• Promotional banners
• Story-driven visual content

Summary#

The Image Slider in Robo Gallery is a flexible and performance-optimized solution for presenting images in a dynamic format. With full control over animations, navigation, content panels, and loading behavior, it adapts to both simple and advanced use cases.

For best results, combine the slider with optimized image sizes and lazy loading options.