[B] Pretty Gallery — Swiper Gallery with Vertical Thumbnails for Elementor

Requirements

• WordPress 6.0 or higher
• PHP 8.1 or higher
• Elementor (free version) installed and active
• The site must allow loading of Elementor/Swiper assets (the widget uses Swiper provided by Elementor)

Installation

1. Go to Plugins → Add New in your WordPress admin.
2. Click Upload Plugin and select the .zip file, or search for “Pretty Gallery”.
3. Click Install Now, then Activate.
4. Edit any page with Elementor and add the “Pretty Gallery” widget.

Adding the Widget

1. Open the page with Edit with Elementor.
2. Search for “Pretty Gallery” in the widget panel.
3. Drag the widget to the desired section.

Content Tab Settings

Source

• Manual Selection: You choose the images in the “Gallery Images” control.
• Post Attachments: The widget uses image attachments from the current post.

Gallery Images

Appears only with Manual Selection. Select one or more images.

Transition Effect

Defines the transition effect of the main slider:

• Slide
• Fade
• Cube 3D
• Coverflow

Loop Slides

Enable to repeat infinitely. Note: With Cube 3D effect, loop is automatically disabled.

Transition Speed (ms)

Transition speed in milliseconds.

Autoplay Options

• Autoplay: Enables automatic rotation.
• Autoplay Delay (ms): Delay between slides (only if Autoplay is active).
• Pause on Hover: Pauses autoplay when hovering (only if Autoplay is active).
• Start on Hover: Autoplay starts only when the mouse enters the gallery and stops when the mouse leaves. Uses only the transition speed (no delay between slides) creating a continuous and fluid transition. Ideal for interactive galleries.

Navigation Options

• Hide Arrows on Mobile: Hides arrows on mobile devices.
• Hide Navigation Arrows: Completely hides navigation arrows on all devices.

Thumbnail Options

• Hide Thumbnails: Completely hides thumbnails, transforming the widget into a simple slider.
• Thumbs Position: Defines where thumbnails appear relative to the main image — Right (default), Left, Bottom, or Top. On mobile, thumbnails always appear below regardless of the setting.
• Hide Scrollbar: Hides the scrollbar of thumbnails when there are more thumbnails than available space.
• Thumbs Rows (desktop): Number of visible thumbnails in the column on desktop.

Style Tab Settings

Wrapper

• Gap between areas
• Max width / max height of wrapper
• Background
• Border and Shadow

Main Image

• Max width / max height of main image
• Object Fit / Object Position
• Border radius
• Shadow

Thumbnails

• Width of thumbnail area
• Width and height of thumbnails
• Spacing between thumbs
• Active/inactive opacity
• Border and radius
• Shadow

Navigation

• Arrow size
• Color and background
• Shadow

Usage Examples

Manual Gallery (most common)

1. Widget → Content → Source: Manual Selection
2. Select images in Gallery Images
3. Choose the Transition Effect
4. Adjust Thumbs Rows to control how many thumbnails appear

Gallery by Post Attachments

1. In WP admin, attach images to the post (media attached to post)
2. Widget → Content → Source: Post Attachments
3. Publish/update the page

Autoplay with Pause on Hover

1. Enable Autoplay
2. Adjust Autoplay Delay
3. Keep Pause on Hover enabled for better UX on desktop

Simple Slider (without thumbnails)

1. Widget → Content → Hide Thumbnails: Enabled
2. Configure Autoplay if you want automatic navigation
3. The gallery will work only with navigation arrows

Minimalist Gallery (banner/carousel)

1. Widget → Content → Hide Navigation Arrows: Enabled
2. Widget → Content → Hide Thumbnails: Enabled
3. Enable Autoplay for automatic navigation
4. Configure Autoplay Delay and desired effects

Interactive Gallery (starts on hover)

1. Widget → Content → Enable Autoplay
2. Enable Start on Hover
3. Adjust the Transition Speed to control fluidity
4. The slider starts stopped and only starts when the mouse enters the gallery

Note: The “Autoplay Delay” is not used in this mode — the transition is continuous.

Accessibility

• Arrows and thumbnails use buttons with aria-label
• Keyboard support: Enter/Space on thumbnails opens the corresponding slide; Enter/Space on arrows navigates between slides
• Visible focus with :focus-visible

Troubleshooting

The widget appears empty

Confirm if there are selected images (Manual mode) or attachments in the post (Post Attachments mode).

The arrows don’t work

Check if Elementor’s Swiper is loading correctly. Cache or minification conflicts may affect functionality.

Autoplay doesn’t start

Confirm if “Autoplay” is enabled and the “Delay” is greater than 0.

Thumbs on desktop don’t respect the quantity

Confirm the value of “Thumbs Rows (desktop)” and clear page builder cache.

The image doesn’t render on frontend (only in editor)

Clear site and CDN cache. Check if there’s no conflict with other plugins. Confirm that the plugin version is 1.7.0 or higher.

Styles don’t apply on frontend

Clear Elementor cache (Elementor → Tools → Regenerate CSS). Clear browser cache. Check if there’s no conflicting custom CSS.

Stretched/deformed thumbnails

Adjust “Width” and “Height of thumbnails” in Style → Thumbnails. Configure “Space between thumbnails”. Use images with similar proportions.

Thumbnail position doesn’t change

Check if “Hide Thumbnails” is disabled. Clear Elementor and browser cache. On mobile, thumbnails always stay below (this is the expected behavior).

Privacy & Data

This plugin:

• Does not set any cookies.
• Does not make any external HTTP requests.
• Does not collect any user data.
• Does not send data to third parties.
• Is fully compatible with GDPR, LGPD, and similar privacy regulations.

Uninstallation

Deactivating the plugin disables the widget. To fully remove:

1. Deactivate the plugin.
2. Delete it from Plugins → Installed Plugins.