Back to Community

Troubleshooting Common CoBlocks Carousel Issues: Crashes, Conflicts, and Display Problems

Content

The CoBlocks Carousel block is a popular feature for creating dynamic image galleries. However, based on numerous community reports, it can sometimes be a source of frustration. This guide compiles the most frequently encountered problems and their known solutions, workarounds, and official bug tracking links to help you resolve issues efficiently.

1. Editor Crashes When Editing or Deleting a Carousel

The Problem: Attempting to add, remove, or delete images from a carousel causes the WordPress block editor to crash, potentially leaving a problematic block on the page that is difficult to remove.

Why It Happens: This is typically caused by a conflict between the CoBlocks plugin and another element on your site, such as your theme or another plugin.

Common Solutions:

  • Conflict Test: The most reliable way to identify the cause is to perform a conflict test. This involves temporarily switching to a default WordPress theme (like Twenty Twenty-One) and disabling all other plugins except CoBlocks. If the problem disappears, reactivate your theme and plugins one by one to find the culprit. Important: Always perform this test on a staging site first to avoid affecting your live website.
  • Alternative Block: As a temporary workaround, some users have reported success by replacing the carousel block with a different gallery block, such as the Slideshow or Masonry block.

2. Multiple Carousels on One Page Not Working Correctly

The Problem: When more than one carousel is used on a single page or post, several issues can occur. The most common are: only the first carousel works while others are frozen; interacting with one carousel (e.g., clicking its thumbnails) causes another carousel to move; or the autoplay function affects all carousels simultaneously.

Why It Happens: This is a known bug related to how the carousel JavaScript is initialized when multiple instances are present. The 'Page Builder Gutenberg Blocks – CoBlocks' team is aware of this issue.

Common Solutions & Tracking:

  • This issue is officially tracked on GitHub. You can follow its progress here: GitHub Issue #1549.
  • Until an official fix is released, the primary workaround is to use only one carousel block per page.

3. Lightbox Not Working on Mobile or Within Carousels

The Problem: The lightbox feature fails to open images, or only shows a partial set of images, specifically on mobile devices or for images within a carousel block.

Why It Happens: This is often due to a plugin conflict. Image optimization and lazy loading plugins are frequent offenders, as they can interfere with the scripts that control the lightbox functionality.

Common Solutions:

  • Plugin Conflict Check: Disable other plugins one by one to identify if one is causing the conflict. As seen in the community threads, the Smush plugin has been identified as a cause for some users.
  • Official Bug Report: A related issue with carousel lightboxes is also being tracked on GitHub: GitHub Issue #2571.

4. Carousel Display and Sizing Problems

The Problem: This category covers a range of visual issues, including images appearing stretched or pixelated, a forced minimum height of 200px, carousels not being responsive on mobile, or navigation arrows/buttons not displaying correctly.

Why It Happens: These problems can stem from the block's default CSS, theme conflicts, or specific browser incompatibilities (especially with older versions of Safari).

Common Solutions:

  • Responsive Toggle: For mobile display issues, ensure the 'Responsive Height' option is enabled in the carousel block's Advanced settings.
  • Custom CSS: Many display issues can be overridden with custom CSS. Examples from the community include:
    div.your-container .coblocks-gallery.is-cropped .coblocks-gallery--item img { height: 75px; width: auto; } (to override the minimum height)
    .has-carousel-med.has-aligned-cells .coblocks-gallery--item { width:100%; height:100%; } (to fix sizing after an update)
    #swiper-wrapper { transition-timing-function: ease-in-out !important; transition-duration: 3s !important; } (to smooth the slide transition)
  • Browser-Specific Fixes: Issues in older versions of Safari may require specific CSS hacks or waiting for a core plugin update that addresses the compatibility problem.

5. General Troubleshooting Steps

For any issue not listed above, follow these best practices:

  1. Update Everything: Ensure WordPress, your theme, and all plugins (especially CoBlocks) are updated to their latest versions. Many bugs are patched in updates.
  2. Conflict Test: As mentioned in point #1, a conflict test is the most powerful diagnostic tool.
  3. Check GitHub: The CoBlocks code and bug reports are public on GitHub. Search for your issue to see if it's already been reported and what the status is: CoBlocks on GitHub.

By methodically working through these common problems and solutions, you can often resolve carousel issues and get your galleries displaying correctly. The community and developers are actively working on improving the block, so checking GitHub for the latest status on bug fixes is always recommended.

Related Support Threads Support