In small carousel, when all slides are visible, layout shifts 10px on init.

[SamTyurenkov]

Checks

• [X] Not a duplicate.
• [X] 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

Description

Right after initialization, .splide__list gets a translateX(10px) for a small slider where all slides are visible

With same code, when slides exceed container, splide__list gets a translateX(0) on initialization.

This behaviour seems inconsistent and cause an annoying layout shift after initialization.

Reproduction Link

No response

Steps to Reproduce

	var slider = new Splide( '.interactive_content.splide', {
		type: 'slide',
		autoWidth: true,
		autoHeight: true,
		gap: '10px',
		arrows: false,
		pagination: true,
		drag: 'free',
		dragMinThreshold: {
			mouse: 0,
			touch: 10,
		},
		omitEnd: true,
		focus: 'center',
		trimSpace: 'move',
		padding: '20px',
		breakpoints: {
			1100: {
				padding: '10px',
			},
			993: {
				padding: '8px',
			},
	  	}
	  } ).mount();

.splide {

	&__track {
		overflow: visible;
		max-width: 100%;

		.splide__list {
			align-items: center;
			transform: translateX(0);

			.splide__slide {
				margin-right: 10px;
				border-radius: 5px;
			}
		}
	}

	&__arrows {
		z-index: 10;
		position: relative;
    	order: 5;

		.splide__arrow {
			background-color: #78bb80;
			border: 0;
			border-radius: 5px;
			-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, .25);
			box-shadow: -1px 2px 2px rgba(0, 0, 0, .25);
			position: absolute;
			cursor: pointer;
			color: #000;
			opacity: 1;
			top: -55px;

			&:hover {
				background-color: #a4d6aa;
			}

			&:disabled {
				background-color: #828282;
			}

			svg {
				width: 10px;
				height: 10px;
				padding: 10px;
			}

			&--prev {

				right: 65px;

				svg {
					transform: rotate(180deg);
				}
			}

			&--next {
				right: 10px;
			}
		}
	}

	&.no_arrows {
		.splide__arrows {
			display: none;
		}
	}
}

	&.splide {
		.splide_extra_container {
			width: 100%;
			max-width: 100%;
			min-width: 100%;
			box-sizing: border-box;
			flex: 0 0 100%;
			display: flex;
			justify-content: center;
			.splide__pagination {
				position: absolute;
				bottom: 0;
				right: 25%;
				flex: 0 0 calc(46% - 10px);
				box-sizing: border-box;
				justify-content: start;
				padding: 0;

				@media(max-width:992px) {
					right: 12%;	
				}

				@media(max-width:640px) {
					flex: 0 0 100%;
					justify-content: center;
					bottom: -15px;
					right: unset;
					width: 100%;
				}

				button {
					color: #111;
					padding: 15px;
					line-height: 30px;
					font-weight: 600;
					box-shadow: -1px 1px 1px rgb(0 0 0 / 25%);
					border-radius: 5px;
					margin-left: 1px;
					border-style: initial;
					cursor: pointer;
					text-decoration: none;
					background: #78bb80;
					margin: 0 3px;
					transform: rotate(45deg);
					transition: all 0.3s ease;
					opacity: 1;

					&:hover,
					&.is-active {
						background: #a4d6aa;
						transform: rotate(12deg);
					}
				}
			}

			.splide__track {
				box-sizing: border-box;
				padding: 0 20px;
				min-height: 400px;
				height: 400px;


				@media(max-width:1100px) {
					padding: 0 10px;
				}

				@media(max-width:992px) {
					padding: 0 8px;
				}

				@media(max-width:768px) {
					min-height: 280px;
					height: 280px;
				}

				.splide__list {

					.splide__slide {
						border-radius: 5px;
						margin-right: 10px;
						width: auto;
						display: flex;
						align-items: center;
						overflow: visible;
						background-color: #111;

						img {
							max-height: 400px;
							transition: all 0.6s ease;
							display: block;
							box-shadow: -2px 2px 2px rgb(0 0 0 / 25%);
							background-color: #d9d9d9;
							border-radius: 5px;
							background: #000;

							@media (max-width: 768px) {
								max-height: 280px;
							}
						}
					}
				}
			}
		}
	}

Expected Behaviour

no layout shift after initialization

[yyywork]

I am having the same issue like yours as well, It shifts 136.5px for me, It becomes normal after triggering a 'move' event.(But it couldn't be a workaround for my case)

[bronisMateusz]

@yyywork Have similar issue, but in my case set focus option to 1 solved the problem.

My whole optionset:

new Splide(carousel, {
  type: "loop",
  mediaQuery: "min",
  gap: 20,
  focus: 1,
  breakpoints: {
    1024: {
      perMove: 1,
      perPage: 2,
    },
  },
}).mount();