Back to Community
Home / Community / Plugin → Spectra gutenberg blocks – website builder for the block editor

How to Fix Spectra Slider and Carousel Arrow Display Issues

13 threads Sep 10, 2025 Plugin → Spectra gutenberg blocks – website builder for the block editor

Content

If you're using the Spectra plugin to build your WordPress site, you've likely encountered its powerful Slider and Carousel blocks. A common point of confusion and frustration for many users revolves around the navigation arrows—specifically their size, position, and even their appearance. This guide will walk you through the most common issues and how to resolve them.

Common Arrow-Related Issues

Based on community reports, the typical problems users face include:

  • Arrows displaying as text ("prev" / "next") instead of icons.
  • Being unable to move arrows closer than 50px from the edge of the slide.
  • Difficulty changing the arrow size, as the input field is limited to a maximum of 50px.
  • Arrows appearing inside dark, un-styled background shapes.
  • Arrows not functioning correctly due to a potential conflict with the Gutenberg plugin.

Why These Issues Happen

These problems generally stem from a few key areas:

  1. Plugin or Theme Conflicts: A conflict with your active theme or another plugin is a frequent cause of arrows not rendering correctly and showing text labels.
  2. Built-in Design Limitations: The Spectra team has confirmed that certain styling options, like the 50px minimum distance and maximum size for arrows, are intentional limits within the block's design settings.
  3. Caching: As noted in one thread, a caching plugin can sometimes prevent updated styles or fixed JavaScript from loading, causing display issues.
  4. Container Settings: For full-width sliders, the block's width is often controlled by the container it's placed inside. If the surrounding container has padding or is not set to full width, it can prevent the slider and its arrows from positioning correctly.

Troubleshooting and Solutions

1. Arrows Showing Text ("prev" / "next")

This is almost always a symptom of a conflict.

  • Clear Your Cache: If you use a caching plugin, clear all its caches and temporarily disable it to see if the arrows appear correctly.
  • Conflict Test: Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) and deactivate all other plugins except Spectra. If the arrows work, reactivate your plugins and theme one by one to identify the culprit.

2. Adjusting Arrow Position and Size Beyond Default Limits

The block settings have built-in limits. To override them, you will need to use Custom CSS.

  • For Position: If setting the "Arrow Distance from Edges" to a negative value (e.g., -20px) in the block settings doesn't work, you can use CSS. First, add a custom CSS class to your slider block (e.g., my-custom-slider). Then, add the following CSS code to your site (via Appearance > Customize > Additional CSS or a custom CSS plugin).

    .my-custom-slider .swiper-arrow { margin: 0 -20px; }

    Adjust the -20px value to bring the arrows closer (more negative) or push them further away (less negative or positive).
  • For Size: To make arrows larger than 50px, use similar CSS targeting.

    .my-custom-slider .swiper-arrow svg { width: 120px; height: 120px; }

3. Fixing Dark Backgrounds on Arrows or Dots

If your navigation elements appear on dark circles or squares, this is likely their default background color. You can override this with CSS as well.

.uagb-swiper-container .swiper-button-next, .uagb-swiper-container .swiper-button-prev, .uagb-swiper-container .swiper-pagination-bullet { background-color: #ffffff !important; }

4. Ensuring a Full-Width Slider

For a slider to be truly full-width, you must check two places:

  1. In the Spectra Container block settings that holds the slider, set the content width to "Full Width."
  2. In the Slider block itself, navigate to the Spacing settings and set all padding values to 0.

When to Consider a Different Cause

If you have confirmed there are no conflicts and CSS overrides aren't working, your issue might be a bug introduced by a WordPress or Spectra update. The Spectra team has acknowledged some feature limitations and has marked several community requests for improved arrow control for future development. If you believe you've found a new bug, providing detailed feedback to the Spectra team can help them improve the plugin for everyone.

By methodically working through these steps—checking for conflicts, leveraging custom CSS, and verifying container settings—you should be able to gain control over your Spectra sliders and carousels and achieve the design you want.

Related Support Threads Support