44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
"use client";
|
|
import Image from "next/image";
|
|
import logobrand1 from "@img/logo/alp.png";
|
|
import logobrand2 from "@img/logo/lam.png";
|
|
import logobrand3 from "@img/logo/tuk.png";
|
|
import logobrand4 from "@img/logo/vi.png";
|
|
import logobrand5 from "@img/logo/woo.png";
|
|
|
|
const MovingLogos = () => {
|
|
const logos = [
|
|
{ id: 1, logo: logobrand1 },
|
|
{ id: 2, logo: logobrand2 },
|
|
{ id: 3, logo: logobrand3 },
|
|
{ id: 4, logo: logobrand4 },
|
|
{ id: 5, logo: logobrand5 },
|
|
{ id: 6, logo: logobrand1 },
|
|
{ id: 7, logo: logobrand2 },
|
|
{ id: 8, logo: logobrand3 },
|
|
{ id: 9, logo: logobrand4 },
|
|
{ id: 10, logo: logobrand5 },
|
|
];
|
|
|
|
// Duplicate logos array to ensure seamless infinite scroll
|
|
const duplicatedLogos = [...logos, ...logos, ...logos]; // Tripling the logos array
|
|
|
|
return (
|
|
<div className="relative w-full overflow-hidden">
|
|
<div className="flex animate-scroll ">
|
|
{duplicatedLogos.map((e, index) => (
|
|
<div key={index} className="w-[100px] flex-shrink mx-4">
|
|
<Image
|
|
src={e.logo}
|
|
alt={`Logo ${e.id}`}
|
|
className="xs:w-[60px] lg:w-[100px] mx-10"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MovingLogos;
|