How to Sync a Background Image with an Elementor Loop Carousel

A Loop Carousel can move from one item to the next while the section behind it stays the same. If each item represents a different story, product, or place, changing the background with it can make the section easier to follow. The important part is to let the carousel control the image. Two independent autoplay timers will drift apart.

The earlier version of this tutorial promised a JavaScript snippet but did not include it. It also mixed Elementor’s native background slideshow with the Loop Carousel. This version uses one background image on the outer container and updates it when the carousel changes. It does not try to control Elementor’s separate slideshow timer.

What you need

• Elementor Pro and a working Loop Carousel widget.
• One outer container with the carousel inside it.
• One background image URL for each carousel item, in the same order.
• Elementor Custom Code or another safe way to add page-scoped JavaScript. Test on staging first if this is a live site.

Elementor’s Loop Carousel documentation covers creating the template and configuring the widget. Its Custom Code guide covers where to add a script. The code below relies on the carousel’s Swiper instance, so a future Elementor markup change may require adjusting the selector.

Set up the section in Elementor

1. Create the outer container and place your Loop Carousel inside it. Finish the carousel content and decide on the image order.
2. In the outer container’s Advanced tab, set CSS ID to outer-slider-box. Enter the ID without the # character.
3. In the Loop Carousel widget’s Advanced tab, set CSS ID to inner-slider-box.
4. Remove any native Background Slideshow from the outer container. Give it one ordinary fallback background image instead. If both systems run, they can overwrite each other.
5. Set a minimum height and enough text contrast for every image. A dark overlay is often needed when text sits on photography.

The IDs must be unique on that page. If you have more than one carousel-background pair, duplicate and adapt the code with different IDs for each pair.

Add the background-changing code

Create a new Elementor Custom Code entry, set its location to the end of the body, and limit the display condition to the page that contains this section. Paste the snippet below inside script tags. Replace the three example image URLs with your own Media Library image URLs, then add or remove entries so the array matches the carousel items.

<script>
(function () {
  const outer = document.getElementById('outer-slider-box');
  const widget = document.getElementById('inner-slider-box');
  if (!outer || !widget) return;

  // Replace these URLs. Keep their order the same as the Loop Carousel items.
  const images = [
    'https://example.com/image-one.jpg',
    'https://example.com/image-two.jpg',
    'https://example.com/image-three.jpg'
  ];
  if (!images.length) return;

  let attempts = 0;
  const timer = window.setInterval(function () {
    const element = widget.querySelector('.swiper, .swiper-container');
    const carousel = element && element.swiper;
    if (!carousel) {
      if (++attempts >= 100) window.clearInterval(timer);
      return;
    }

    window.clearInterval(timer);
    const updateBackground = function () {
      const index = Number.isInteger(carousel.realIndex)
        ? carousel.realIndex
        : carousel.activeIndex || 0;
      outer.style.backgroundImage = 'url("' + images[index % images.length] + '")';
    };

    updateBackground();
    carousel.on('realIndexChange', updateBackground);
    carousel.on('slideChange', updateBackground);
  }, 150);
})();
</script>

The script waits briefly for Elementor to initialize the Loop Carousel, reads the active slide’s real index, and sets the outer container’s background image. It listens for carousel changes, so arrows, dots, swipes, and autoplay use the same source of truth. If the widget is removed or its markup changes, the script stops without modifying anything else.

Check it on the front end

1. Open the published page, not only the Elementor editor preview.
2. Move through every carousel item using the arrows, dots, and a mobile swipe. The background should follow the active item and wrap correctly from the last item to the first.
3. If autoplay is enabled, watch at least two complete cycles. The text must remain readable on every image.
4. If nothing changes, confirm both CSS IDs, the image URLs, and that the Custom Code condition includes this page. Inspect the browser console for a blocked script or missing carousel.
5. If the wrong image appears, reorder the image URLs to match the carousel items. A dynamic query can change the item order; this fixed array is best for a deliberately curated carousel.

A few limits worth knowing

This is a page-level customization, not a built-in link between two Elementor widgets. Swiper documents the realIndex value and change events used here, but Elementor can change its rendered markup in an update. Keep a copy of your script and recheck it after major Elementor updates. If you want the background itself to crossfade, add a separate transition layer; simply changing background-image does not animate the image.

Elementor also offers a native Background Slideshow. It is useful when the background can run independently. For a background that follows manual carousel navigation, one shared carousel state is more reliable.

Implementation note: the JavaScript was checked against a local simulated carousel state, not installed and tested on every Elementor release. Confirm the selectors and behavior on your own staging site before using it in production.