How to Fix Image Slider Scrollbar Issue with CSS

If your Image Slider shows an unwanted scrollbar across its thumbnails when previewing or publishing your page, you’re in the right place. This guide covers a quick CSS fix — and a better long-term solution.

Heads up: The Image Slider element is deprecated. It still works on existing pages, but it no longer receives updates. We strongly recommend replacing it with the new Media Carousel element, which fixes this issue (and several others) out of the box. Jump to the Media Carousel section below.

The issue

When previewing a page that uses the Image Slider, a horizontal or vertical scrollbar can appear over the thumbnail strip, like this:

This happens because the slider’s thumbnail wrapper clips its own overflow, which some browsers render as a visible scrollbar.

The quick fix (CSS)

If you want to keep the Image Slider for now, you can hide the scrollbar with a small snippet of custom CSS.

1. Copy the following code:

.image-slider .is-thumbs-wrapper {
  overflow-y: visible !important;
}

2. Paste it under Custom Codes > CSS in your page settings:

3. Save and preview your page. The scrollbar should be gone.

Keep in mind this is a patch, not a permanent solution — since the Image Slider is deprecated, similar quirks may appear over time and won’t be fixed at the element level.

Recommended: switch to the Media Carousel

The Media Carousel is the modern replacement for the Image Slider, and it’s a significant upgrade in every way:

  • Native swiping on all devices — visitors can swipe through slides with their finger on mobile and tablet, or drag on desktop. No custom code needed.

  • Supports all media types — mix images and videos freely in the same carousel, perfect for product galleries that combine photos with demo clips.

  • Fully customizable — control arrows, pagination dots, autoplay, looping, slides per view, transition effects, and speed, all from the settings panel.

  • Responsive by design — the carousel adapts cleanly to every screen size, and you can fine-tune its look per device.

  • No scrollbar issues — the layout problems that affect the deprecated Image Slider simply don’t exist here.

How to replace your Image Slider

  1. Open your page in the editor and click + Add element.

  2. Under the Media section, drag the Media Carousel onto your page (you’ll see it marked as NEW — the Image Slider is marked as DEPRECATED).

  3. Add your images and videos as slides using the + button.

  4. Adjust arrows, pagination, autoplay, and other settings from the left-side panel.

  5. Once you’re happy with the result, delete the old Image Slider and save your page.

The whole swap usually takes just a couple of minutes, and your gallery will look and behave better on every device.

Keep Learning

Questions about your slider or carousel setup? Ask the community in the Ask the community category. For account-specific issues, contact us on chat support.

1 Like