SplideJS slider shows cut-off second-to-last slide when returning from last slide with dynamic padding(Peeking)

[squidiw]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.4

Description

Issue Description

When implementing a slider with SplideJS that uses padding-right to create a peek effect for the next slide, we've encountered an issue where the second-to-last slide appears cut off when navigating back from the last slide.
Current Implementation

We're using padding-right to create a "peek" effect showing a glimpse of the next slide
On the last slide, we reduce this padding (dividing by 1.5) to avoid a large empty space
When returning from the last slide to previous slides, the padding is reset to the original value

The Bug

When navigating back from the last slide to the second-to-last slide, the second-to-last slide appears cut off or incorrectly sized. It seems the slide width isn't being properly recalculated when the padding-right value changes back to its original value. Only after navigating past this slide and back again does it display correctly.
Current Workaround
We've found that applying a negative margin-right (-10px) specifically for the second-to-last slide fixes the issue:

if (currentIndex === secondToLastIndex) {
    // Second-to-last slide - full padding but with negative margin
    trackElement.style.paddingRight = originalPadding;
    trackElement.style.marginRight = "-10px"; // Negative margin here
}

More code

parseAndHalvePadding = paddingValue => {
		if (typeof paddingValue === "string") {
			// Extract the numeric part and the unit
			const match = paddingValue.match(/^([\d.]+)(.*)$/);
			if (match) {
				const numericValue = parseFloat(match[1]);
				const unit = match[2]; // This will be "rem", "%", "px", etc.
				return numericValue / 1.5 + unit;
			}
		} else if (typeof paddingValue === "number") {
			return paddingValue / 1.5;
		}
		return paddingValue; // Return as-is if we can't parse it
	};

init() {
		const config = this.getConfig();
		this.createProgressBar();
		this.slider = new this.SplideClass(this.container, config);
		this.slider.mount();

		// Check and disable drag if needed
		this.checkAndDisableDrag();

		const trackElement = this.container.querySelector(".splide__track");

		// Store original padding values
		const originalPadding = this.getPaddingForBreakpoint();
		const halvePadding = this.parseAndHalvePadding(originalPadding);

		["move", "moved"].forEach(eventName => {
			this.slider.on(eventName, () => {
				const currentIndex = this.slider.index;
				const lastIndex = this.slider.Components.Controller.getEnd();
				const secondToLastIndex = lastIndex - 1;
				const needsPeekAdjustment = this.shouldApplyPeekAdjustment();

				trackElement.style.transition =
					"padding-right 0.3s ease, margin-right 0.3s ease";

				// Only apply padding if the peek adjustment is needed
				if (needsPeekAdjustment) {
					if (currentIndex === lastIndex) {
						// Last slide - reduced padding with margin
						trackElement.style.paddingRight = halvePadding;
						trackElement.style.marginRight = "10px";
					} else if (currentIndex === secondToLastIndex) {
						// Second-to-last slide - full padding but with negative margin
						// This fixes an issue where the second to last slide is not fully visible
						trackElement.style.paddingRight = originalPadding;
						trackElement.style.marginRight = "-10px"; // Negative margin here
					} else {
						// All other slides - full padding, no margin
						trackElement.style.paddingRight = originalPadding;
						trackElement.style.marginRight = "0";
					}
				} else {
					// No padding needed for this breakpoint
					trackElement.style.paddingRight = "0";
					trackElement.style.marginRight = "0";
				}
			});
		});

		this.setupProgressBar();
	}

### Questions

Is there a more elegant way to handle dynamic padding changes in SplideJS without causing slide sizing issues?
Is this a known issue with how Splide recalculates slide dimensions when padding changes?
Could there be a better approach to implement the "reduced padding on last slide" effect that doesn't cause these transition issues?



### Reproduction Link

https://drive.google.com/file/d/1QZN36Fy2wwnJ_-xnfrlwCYrgJIPY6yp1/view?usp=sharing

### Steps to Reproduce

N/A

### Expected Behaviour

Second to last slide should show fully.