Problem with array.map into Marquee

[Daniil-Borisov]

When I used marquee with array.map, I had bad view and bugs. My marquee started from center and run to left side, then I saw empty place and then it flashed and started over. But when I use just images, it worked perfect.

'use client'
import Marquee from 'react-fast-marquee';

const carouselItems = [
	'car-logo-1',
	'car-logo-2',
	'car-logo-3',
	'car-logo-4',
	'car-logo-5',
	'car-logo-6',
	'car-logo-7',
	'car-logo-8',
	'car-logo-9',
	'car-logo-10',
	'car-logo-11',
	'car-logo-12',
	'car-logo-13',
	'car-logo-14',
	'car-logo-15',
];

export const Carousel = () => {
	return (
		<div>
			<div className='flex'>
				<Marquee speed={150} gradient={false}>
					{carouselItems.map((logo) => (
						<div className='flex items-center justify-center px-4' key={logo}>
							<img
								src={`/images/car-logos/${logo}.png`}
								alt={logo}
								className='object-contain'
							/>
						</div>
					))}
					
				</Marquee>
			</div>
		</div>
	);
};

[technoph1le]

@Daniil-Borisov I had the same issue, just add autoFill={true} in your <Marquee> component. It should fix it.

<Marquee speed={150} gradient={false} autoFill={true}>
  ...
</Marquee>