Bricks Builder includes a slider element for creating image carousels and content sliders easily.
After running an image optimization plugin, the sliders may stop working completely.
The slider navigation arrows may appear, but the slides remain empty or show broken images.
In some cases, the slider does not load at all, and the content stays hidden from visitors.
This problem occurs because image optimization plugins change how images are stored and served.
Why image optimization breaks Bricks Builder sliders
Image optimization plugins often convert images to WebP format for better compression and speed.
WebP images have different file extensions (.webp) that Bricks Builder may not recognize immediately.
Lazy loading features in optimization plugins can interfere with slider initialization scripts.
Changing image file names or paths breaks the references stored in Bricks Builder slider settings.
CDN URLs for optimized images may not work correctly with Bricks Builder slider elements.
How to check if image optimization caused the slider problem
Temporarily disable all image optimization plugins on the WordPress website completely.
Clear all caches and test the Bricks Builder slider on the frontend of the website.
If the slider starts working again, an image optimization plugin is causing the problem.
Re-enable optimization plugins one by one while testing the slider after each activation.
The plugin that breaks the slider again is the source of the conflict for the website.
Step by step guide to fixing Bricks Builder sliders
Follow these steps to restore Bricks Builder sliders after image optimization breaks them.
- Regenerate all image thumbnails using a plugin like Regenerate Thumbnails from the repository
- Replace slider images by re-uploading them from the media library to refresh the paths
- Disable WebP conversion for slider images in the image optimization plugin settings
- Disable lazy loading specifically for Bricks Builder sliders in the optimization plugin
- Exclude slider images from being converted to WebP format by the optimization plugin
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Recreate the slider from scratch instead of trying to repair the broken existing one
- Test the slider on multiple devices to ensure it works after making changes
- Use original image formats (JPEG, PNG) instead of WebP for slider images specifically
- Contact the image optimization plugin support for Bricks Builder compatibility help
How to exclude Bricks Builder sliders from image optimization
In ShortPixel settings, navigate to the Advanced tab and find the exclusion options section.
Add .brx-slider to the list of CSS classes that should not be optimized by the plugin.
In Imagify, go to the Settings panel and add brx-slider to the excluded classes list.
In EWWW Image Optimizer, find the “Disable for selectors” option and add .brx-slider.
Save the settings and clear all caches to apply the exclusion rules to the website.
Bricks Builder slider troubleshooting reference table
Here is a reference table for diagnosing slider problems in Bricks Builder.
| Symptom | Most likely cause | Recommended solution |
|---|---|---|
| Slider shows broken image icons | Image paths changed by optimization plugin | Re-upload images or disable WebP conversion |
| Slider does not load at all | JavaScript conflict or lazy loading issue | Disable lazy loading for slider container |
| Slider loads but images are missing | Image files were deleted or moved | Restore images from backup or re-upload |
| Slider works but navigation arrows are broken | Font icons converted incorrectly | Exclude slider icon fonts from optimization |
| Slider works on desktop but not on mobile | Responsive settings or touch events | Check mobile slider settings in Bricks Builder |
For more information about Bricks Builder slider optimization, visit the Bricks Builder page on wpwizzy.com.
Preventing Bricks Builder slider problems in the future
Exclude Bricks Builder sliders from image optimization and lazy loading features.
Test sliders immediately after configuring any new image optimization plugin on the website.
Keep original image files as backups in case optimization plugins cause problems later.
Use a staging website to test image optimization settings before applying them to the live site.
Document which optimization settings work well with Bricks Builder sliders for future reference.
Regularly check sliders on both desktop and mobile devices to catch problems early.