Почему не работает slidesPerView auto?

Question

[DZHAMBUALT]

Здраствуйте! Не работает свойство slidesPerView. Не могу понять в чем дело.
Вот код swiper

const LootBoxSpinner: FC<Props> = ({
	items,
	className,
	slideClassName,
	swiper,
}) => {
	return (
		<Swiper
			{...swiper}
			slidesPerView={'auto'}
			spaceBetween={swiper.spaceBetween || 12}
			className={twMerge(`w-full ${className}`)}
		>
			{items.map(({ image }, index) => {
				return (
					<SwiperSlide className={`${slideClassName}`} key={index}>
						<Image src={image} width={150} height={150} alt='приз' />
					</SwiperSlide>
				)
			})}
		</Swiper>
	)
}

Рендер swiper

Comments

[Ankhena]

Тут, наверное, два глобальных варианта:
1. Делать минимальную песочницу с иллюстрацией проблемы.
2. Самостоятельно смотреть в стили.

Из того, что вы пишете видно, что картинка и её блок должны быть квадратными. Но на скринах всё не так. Значит, какие-то ещё стили влияют на это поведение. Но их вы нам не показали.

[Danny Arty]

Научитесь прикладывать код в песочницу наподобие codepen и ссылку сюда. По скринам будет просто гадание

[DZHAMBUALT]

Ankhena, Все стили описаны с помощью классов tailwind больше ничего нет поверх них

[DZHAMBUALT]

Ankhena, Danny Arty, Знаете что мне помогло? Я добавил inline стилями width: auto и все заработало. Странно почему это так работает. У swiper-slide по умолчанию стоял width 100% мои стили этого не писали.

[Ankhena]

DZHAMBUALT, поэтому и нужна песочница, чтобы было видно что ещё есть.
С другой стороны, зато самостоятельно разобрался.

[Danny Arty]

DZHAMBUALT, просто у вас уже 46 вопросов на сервисе, а вы все еще прикладываете код скринами. Просто будучи разработчиком, подумайте, как можно что-то дельное сказать, видя лишь картинки. Намного быстрее и точнее вы получите ответ, если будете воспроизводить проблему в песочнице и прикладывать ссылку к вопросу

[DZHAMBUALT]

Danny Arty, Не хотел слишком заморачиваться с этим ведь проблема не такая и сложная была. В следующий раз буду в песочницу кидать)