How to Fix Elementor Carousel Issue: Custom CSS Solution

Slides not looping properly? Try the custom code below.

From the WordPress dashboard, navigate to Elementor → Custom Code.
Add the following code and choose </body> End for the location dropdown.
After adding the custom CSS, click Update and select Entire Site.
🌐
filename.html
<script>
(function () {
  'use strict';

  function initSwiperFix() {
    if (!window.matchMedia || !window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    function disableReducedMotion() {
      var affected = [];

      Array.prototype.forEach.call(document.styleSheets, function (sheet) {
        try {
          if (!sheet.cssRules) return;

          Array.prototype.forEach.call(sheet.cssRules, function (rule) {
            if (
              rule.type === CSSRule.MEDIA_RULE &&
              rule.conditionText &&
              rule.conditionText.indexOf('prefers-reduced-motion') !== -1
            ) {
              rule.media.mediaText = 'not all';
              affected.push(rule);
            }
          });
        } catch (e) {}
      });

      return affected;
    }

    function restoreReducedMotion(rules) {
      rules.forEach(function (rule) {
        rule.media.mediaText = 'screen and (prefers-reduced-motion: reduce)';
      });
    }

    function getSwiperFromArrow(arrowEl) {
      var wrapperId = arrowEl.getAttribute('aria-controls');

      if (wrapperId) {
        var wrapper = document.getElementById(wrapperId);

        if (wrapper) {
          var container =
            wrapper.closest('.swiper, .swiper-container') ||
            wrapper.parentElement;

          if (container && container.swiper) return container.swiper;
          if (wrapper.parentElement && wrapper.parentElement.swiper) return wrapper.parentElement.swiper;
        }
      }

      var el = arrowEl;

      for (var i = 0; i < 10 && el; i++) {
        if (el.swiper) return el.swiper;
        el = el.parentElement;
      }

      return null;
    }

    function move(swiper, targetIndex) {
      if (!swiper || swiper.destroyed) return;

      swiper.allowSlideNext = true;
      swiper.allowSlidePrev = true;
      swiper.allowTouchMove = true;

      var speed = swiper.params.speed || swiper.originalParams.speed || 600;
      var affected = disableReducedMotion();

      if (typeof swiper.slideToLoop === 'function') {
        swiper.slideToLoop(targetIndex, speed, true);
      } else if (typeof swiper.slideTo === 'function') {
        swiper.slideTo(targetIndex, speed, true);
      }

      setTimeout(function () {
        restoreReducedMotion(affected);
        if (typeof swiper.update === 'function') swiper.update();
      }, speed + 50);
    }

    function patchAllSwipers() {
      document.querySelectorAll('.swiper, .swiper-container').forEach(function (container) {
        var swiper = container.swiper;

        if (!swiper || swiper.destroyed || swiper._elementorReducedMotionPatched) return;

        swiper._elementorReducedMotionPatched = true;

        if (swiper.params.speed < 100) {
          swiper.params.speed = swiper.originalParams.speed || 600;
        }

        swiper.on('autoplayTimeLeft', function () {
          if (swiper.params.speed < 100) {
            swiper.params.speed = swiper.originalParams.speed || 600;
          }
        });

        swiper.on('slideChange', function () {
          var speed = swiper.params.speed || swiper.originalParams.speed || 600;
          var affected = disableReducedMotion();

          setTimeout(function () {
            restoreReducedMotion(affected);
            if (typeof swiper.update === 'function') swiper.update();
          }, speed + 50);
        });
      });
    }

    function makeClickable() {
      document.querySelectorAll(
        '.swiper-button-next, .swiper-button-prev, .elementor-swiper-button-next, .elementor-swiper-button-prev'
      ).forEach(function (btn) {
        btn.style.pointerEvents = 'auto';
        btn.style.cursor = 'pointer';
        btn.style.zIndex = '10';
      });
    }

    document.addEventListener('click', function (ev) {
      var arrow = ev.target.closest && ev.target.closest(
        '.swiper-button-next, .swiper-button-prev, .elementor-swiper-button-next, .elementor-swiper-button-prev'
      );

      if (!arrow) return;

      ev.preventDefault();
      ev.stopPropagation();

      var swiper = getSwiperFromArrow(arrow);
      if (!swiper) return;

      var dir =
        arrow.classList.contains('swiper-button-next') ||
        arrow.classList.contains('elementor-swiper-button-next')
          ? 1
          : -1;

      var current = typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex || 0;

      move(swiper, current + dir);
    }, true);

    document.addEventListener('click', function (ev) {
      var dot = ev.target.closest && ev.target.closest('.swiper-pagination-bullet');
      if (!dot) return;

      var paginationEl = dot.closest('.swiper-pagination');
      if (!paginationEl) return;

      var container = paginationEl.closest('.swiper, .swiper-container');
      if (!container || !container.swiper) return;

      ev.preventDefault();
      ev.stopPropagation();

      var bullets = Array.prototype.slice.call(
        paginationEl.querySelectorAll('.swiper-pagination-bullet')
      );

      var targetIndex = bullets.indexOf(dot);
      if (targetIndex < 0) return;

      move(container.swiper, targetIndex);
    }, true);

    makeClickable();
    patchAllSwipers();

    setTimeout(function () {
      makeClickable();
      patchAllSwipers();
    }, 1200);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSwiperFix);
  } else {
    initSwiperFix();
  }
})();
</script>