I’m using on a React Swipe Slider and facing issues with centering a larger item while maintaining consistent gaps between slides. Additionally, facing two main issues related to centering a larger item and dealing with jumpy transitions. Here’s a detailed explanation of the problems:

Centering a Larger Item

I need to center a larger item within the slider while maintaining consistent gaps between all slides. The goal is to ensure that the larger item is perfectly centered in the viewport and that the gaps between the slides remain equal.

Despite adjusting various slider settings, the larger item does not align as expected. It either shifts off-center or the gaps between slides become inconsistent.

Jumpy Transitions

When attempting to center the item or modify slider settings, the transitions between slides are jumpy and not smooth. This occurs even after using functions like update or UpdateSize() to refresh the slider’s layout.

Sandbox Example: I have created a demo. You can see the problem with centering and transitions in the provided example. React swiper slider

For a clearer understanding of the issues, here is a screenshot of the UI React swiper slider

Centering a Larger Item

• Adjusted centerPadding to create space around the centered item.
• Changed slidesToShow to control the number of visible slides.
• Experimented with various combinations of centerMode, slidesToShow, and slidesToScroll.

Jumpy Transitions

Applied the UpdateSize() and Update() functions to refresh the slider.
Experimented with different transition settings and durations.

Questions:

1. How can I effectively center the larger item within the slider while maintaining consistent gaps between all slides?
2. What steps can I take to resolve the jumpy transitions and ensure smooth animations when adjusting the centered item?