Elementor Thumbnail Slideshow Widget

A professional, feature-rich slideshow widget for Elementor with thumbnail navigation, integrated lightbox support, and extensive customization options.

📋 Features

Core Features

• Full-Width Main Slide: Main slide takes full width of its container with customizable aspect ratios
• Thumbnail Navigation: Dynamic thumbnails below the main slide with adjustable count (3-10)
• Integrated Lightbox: Uses Elementor's native lightbox with customizable controls
• Navigation Arrows: Fully customizable arrows with icon library support
• Pagination Bullets: Customizable bullet points with visibility limiting
• Autoplay: Optional autoplay with configurable speed
• Touch/Swipe Support: Mobile-friendly touch gestures
• Keyboard Navigation: Arrow key support for accessibility

Customization Options

Main Slide

• Aspect Ratio Presets: 1:1, 3:2, 4:3, 16:9, 21:9, or Custom
• Responsive Aspect Ratios: Different ratios for desktop, tablet, and mobile
• Border Radius: Fully customizable corners
• Box Shadow: Add depth to the slideshow

Thumbnails

• Dynamic Count: 1-10 thumbnails, responsive per device
• Flexible Layout: Auto-adjusts with flexbox
• Spacing Controls: Gap between thumbnails and main slide
• State Styling: Normal, hover, and active states
• Opacity Control: Per state
• Border Options: Color and width customization

Navigation Arrows

• Icon Selection: Choose from icon library or upload SVG
• Size Control: Responsive sizing
• Position Adjustment: Fine-tune placement
• Color Customization: Normal and hover states
• Background: Customizable with transparency
• Padding & Border Radius: Complete shape control

Pagination Bullets

• Max Visible Bullets: Limit displayed bullets (3-15)
• Responsive Limits: Different counts per device
• Size Control: Width and height independently adjustable
• Border Radius: Create circles, pills, or squares
• Spacing: Gap between bullets
• Position: Bottom offset control
• Color States: Normal, hover, and active
• Active Width: Elongate active bullet

Lightbox Options

• Enable/Disable: Toggle lightbox functionality
• Download Button: Show/hide download option
• Share Button: Show/hide share functionality
• Zoom Button: Show/hide zoom control
• Fullscreen Button: Show/hide fullscreen option
• Slideshow Button: Show/hide auto-slideshow in lightbox

Advanced Features

• ACF Gallery Support: Populate from ACF Gallery fields
• Dynamic Tags: Use Elementor Pro dynamic tags
• Responsive Settings: Most controls are device-specific
• Infinite Loop: Optional continuous sliding
• Transition Speed: Customize animation duration
• RTL Support: Works with right-to-left languages
• Accessibility: ARIA labels and keyboard navigation
• Performance Optimized: Lazy loading and efficient animations

🚀 Installation

Method 1: Manual Installation

1. Download all plugin files
2. Create a folder named elementor-thumbnail-slideshow in /wp-content/plugins/
3. Upload these files to the folder:
   • elementor-thumbnail-slideshow.php (main plugin file)
   • thumbnail-slideshow-widget.php (widget class)
   • thumbnail-slideshow-script.js (JavaScript)
   • thumbnail-slideshow-style.css (CSS)
4. Go to WordPress Admin → Plugins
5. Find "Elementor Thumbnail Slideshow Widget"
6. Click "Activate"

Method 2: ZIP Installation

1. Create a ZIP file containing all plugin files in a folder named elementor-thumbnail-slideshow
2. Go to WordPress Admin → Plugins → Add New
3. Click "Upload Plugin"
4. Choose the ZIP file
5. Click "Install Now"
6. Click "Activate Plugin"

📦 Requirements

• WordPress: 5.8 or higher
• PHP: 7.4 or higher
• Elementor: 3.0.0 or higher
• Elementor Pro: 3.0.0 or higher (for dynamic tags and ACF support)

🎨 Usage

Basic Usage

1. Edit a page with Elementor
2. Search for "Thumbnail Slideshow" in the widgets panel
3. Drag the widget to your desired location
4. Click "Add Images" in the Gallery section
5. Select your images from the Media Library
6. Customize settings in the sidebar

Using with ACF Gallery

1. Install and activate Advanced Custom Fields (ACF) Pro
2. Create a Gallery field in ACF
3. Add the widget to your page
4. Click the dynamic tags icon next to "Add Images"
5. Select "ACF" → "Gallery Field"
6. Choose your ACF gallery field
7. The slideshow will automatically populate with images

Using Dynamic Tags (Elementor Pro)

The Gallery control supports all Elementor Pro dynamic tags, including:

• ACF Gallery
• Toolset Gallery
• Pods Gallery
• Custom gallery fields

⚙️ Widget Settings Reference

Content Tab

Gallery Section

• Add Images: Upload or select images from Media Library
  • Supports Dynamic Tags (Pro)
  • Supports ACF Gallery fields (Pro)

Slideshow Settings

• Aspect Ratio: Choose main slide aspect ratio (responsive)
  • Options: 1:1, 3:2, 4:3, 16:9, 21:9, Custom
• Custom Aspect Ratio Width/Height: When Custom is selected
• Autoplay: Enable automatic slide advancement
• Autoplay Speed: Time between slides (milliseconds)
• Transition Speed: Animation duration (milliseconds)
• Infinite Loop: Enable continuous loop

Thumbnail Settings

• Number of Thumbnails: How many thumbnails to show (1-10, responsive)
• Thumbnail Spacing: Gap between thumbnails (responsive)
• Space Between Main & Thumbnails: Vertical spacing (responsive)

Lightbox Settings

• Enable Lightbox: Toggle lightbox functionality
• Show Download Button: Display download option
• Show Share Button: Display share functionality
• Show Zoom Button: Display zoom control
• Show Fullscreen Button: Display fullscreen option
• Show Slideshow Button: Display auto-slideshow control

Navigation Settings

• Show Arrows: Display navigation arrows
• Previous Arrow Icon: Choose icon from library or upload SVG
• Next Arrow Icon: Choose icon from library or upload SVG
• Show Pagination Bullets: Display bullet navigation
• Max Visible Bullets: Limit displayed bullets (3-15, responsive)

Style Tab

Main Slide

• Border Radius: Corner rounding (responsive)
• Box Shadow: Add shadow effects

Thumbnails

• Border Radius: Corner rounding (responsive)
• Normal State:
  • Opacity
  • Border (type, width, color)
• Hover State:
  • Opacity
  • Border Color
• Active State:
  • Opacity
  • Border Color
• Box Shadow: Shadow effects

Navigation Arrows

• Size: Arrow size (responsive)
• Position: Horizontal position (responsive)
• Normal State:
  • Color
  • Background Color
• Hover State:
  • Color
  • Background Color
• Padding: Internal spacing (responsive)
• Border Radius: Corner rounding (responsive)

Pagination Bullets

• Bottom Position: Vertical placement (responsive)
• Bullet Width: Bullet width (responsive)
• Bullet Height: Bullet height (responsive)
• Spacing Between Bullets: Gap size (responsive)
• Border Radius: Corner rounding (responsive)
• Normal State: Background color
• Hover State: Background color
• Active State:
  • Background color
  • Width (for elongated active state)

🎯 Use Cases

1. Product Galleries: Showcase products with thumbnail previews
2. Portfolio Displays: Present work samples with easy navigation
3. Before/After Sliders: Display transformations with thumbnails
4. Image Showcases: Create engaging image galleries
5. Property Listings: Display real estate photos
6. Event Photos: Share event galleries with thumbnails
7. Team Members: Show team photos with navigation
8. Client Logos: Display clients with thumbnail strips

🔧 Customization Tips

Creating Circular Bullets

Set Border Radius to 50% on all sides

Creating Pill-Shaped Bullets

Set Border Radius to 50% and make Active Width larger

Hiding Arrows on Mobile

Use responsive controls to hide arrows on mobile devices

Creating Vertical Thumbnail Strip

Use custom CSS to change flex-direction to column

Limiting Visible Thumbnails

Adjust "Number of Thumbnails" for each device breakpoint

🐛 Troubleshooting

Images Not Showing

• Check that images are uploaded to Media Library
• Verify gallery field has images selected
• Check for JavaScript errors in browser console

Lightbox Not Working

• Ensure "Enable Lightbox" is set to "Yes"
• Check that Elementor is up to date
• Clear browser cache

Thumbnails Not Updating

• Clear browser cache
• Check JavaScript console for errors
• Verify settings are saved

Responsive Issues

• Check responsive settings for each breakpoint
• Test on actual devices, not just browser resize
• Clear cache after making changes

📝 Changelog

Version 1.0.0

• Initial release
• Full thumbnail slideshow functionality
• Lightbox integration
• Responsive controls
• ACF Gallery support
• Dynamic tags support

🤝 Support

For support, feature requests, or bug reports:

• Email: [your-email@example.com]
• Documentation: [your-docs-url]
• GitHub: [your-github-repo]

📄 License

This plugin is licensed under GPL v2 or later.

👏 Credits

Developed by [Your Name/Company] Built for Elementor Page Builder

🔮 Roadmap

Future features planned:

• Video slide support
• Ken Burns effect
• Parallax scrolling
• Advanced transition effects
• Thumbnail hover preview
• Caption support
• Social sharing integration
• Advanced animation options

Made with ❤️ for the Elementor community