Carousel Slider Block

March 25, 2026 · 3 min read

Working with Sliders in Dynamic Layouts, Tabs, Modals, and More

Carousel Slider Block version 2.1.0+ adds a few advanced settings for situations where the slider or its surrounding layout changes after the page has already loaded.

These advanced settings are mainly useful when the slider is placed inside things like:

  • Tabs
  • Accordions
  • Hidden sections
  • Lazy-loaded or dynamically updated content

At the time of writing, these options are available in the block’s Advanced panel.

Available options

ResizeObserver

Uses the Swiper container for resize detection instead of the normal window resize.

Observer

Enables Swiper’s mutation observer on the slider and its elements.

Observe Parent Elements

Watches parent elements for layout or visibility changes.

Observe Slide Children

Watches for content changes inside slide elements.

When to use them

If the slider is in a normal page layout and works correctly, leave these off.

If the slider is inside a tab, accordion, modal, or other dynamic container, try enabling Observer first.

If parent containers are being shown or hidden, or changing layout, also try Observe Parent Elements.

If the issue is related to resizing or layout width changes after load, try ResizeObserver.

Observe Slide Children is only needed in specific cases where slide content itself changes after load.

Frontend API

For custom integrations, the plugin also exposes a small frontend API:

window.CarouselSliderBlock.init(container)
window.CarouselSliderBlock.update(container)

These can also be used when tabs, accordions, modals, or other custom UI need to initialize or refresh sliders after layout changes.

Important

These are advanced troubleshooting and integration settings. They are not required for most sliders, which is why they are disabled by default.