When the “Reduce Motion” accessibility option is enabled on a user’s device, a specific issue with Elementor’s Swiper can occur. The Carousel may appear completely broken — no autoplay, no swiping, and navigation or pagination clicks do nothing.

Why This Happens

The issue is directly related to CSS transitions.

When prefers-reduced-motion: reduce is active, Elementor removes transition effects. However, transitions are fundamental to how Swiper works. If transitions are disabled, Swiper essentially stops functioning — including:

• Autoplay
• Manual swipe gestures
• Navigation arrows
• Pagination clicks

Without transitions, the slider cannot move between slides.

The Ideal (But Unrealistic) Solution

The simplest fix would be to disable the Reduce Motion setting.

However, you cannot require visitors to change their accessibility preferences. As developers, we must respect user accessibility choices.

So we need a proper workaround.

Solution 1: Re-style the Carousel / Switch Layout

You can detect the Reduce Motion preference using a CSS media query:

@media (prefers-reduced-motion: reduce) {
     .reduce-motion-off {
          display: none !important;
     }

     .reduce-motion-on {
          display: block !important; 
     }
}

How to Use This

• Place your Swiper carousel inside a container with class .reduce-motion-off
• Create an alternative static layout inside a container with class .reduce-motion-on
• By default, hide .reduce-motion-on
• When Reduce Motion is enabled, the layout switches automatically

This approach respects accessibility settings and provides a fallback experience. From a professional and UX perspective, this is the most appropriate solution.

Solution 2: Override the Transition

If you prefer to keep Swiper functional even when Reduce Motion is enabled, you can manually restore the transition duration:

@media (prefers-reduced-motion: reduce) {
     .swiper .swiper-wrapper {
          transition-duration: 800ms !important; 
          /* Adjust the duration as needed */
     }
}

The transition is applied to .swiper-wrapper.

If you want this to apply to all Swipers globally, keep the selector as above.
If you want more control, prepend a custom class to scope the override to specific sliders.

Important Consideration

Overriding the transition technically ignores the user’s accessibility preference. While this restores functionality, it may not be ideal from an accessibility compliance standpoint.

For production projects — especially those requiring accessibility standards — the layout-switching solution is recommended.