function MainComponent() { const [current, setCurrent] = React.useState(0); const images = [ "/path/to/image1.jpg", "/path/to/image2.jpg", "/path/to/image3.jpg", "/path/to/image4.jpg", "/path/to/image5.jpg", "/path/to/image6.jpg", "/path/to/image7.jpg", "/path/to/image8.jpg", "/path/to/image9.jpg", "/path/to/image10.jpg", "/path/to/image11.jpg", "/path/to/image12.jpg" ]; const handleArrowClick = (direction)=>{ setCurrent((currentValue)=>(currentValue + (direction === "left" ? -1 : 1) + images.length) % images.length); }; const isImageVisible = (index)=>{ let lastIndex = current + 3; if (lastIndex >= images.length) { return index >= current || index <= lastIndex % images.length; } return index >= current && index <= lastIndex; }; return /*#__PURE__*/ React.createElement("div", { className: "relative mx-auto max-w-[1344px] overflow-hidden", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleArrowClick("left"), className: "absolute left-0 inset-y-0 z-10 flex items-center justify-center w-[40px] cursor-pointer bg-[#ffffff] bg-opacity-50", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left text-2xl text-[#000000]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2.5 overflow-hidden", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, images.map((src, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex-none w-[300px] h-[250px] ${isImageVisible(index) ? '' : 'hidden'}`, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-full object-cover", src: src, alt: `Image Slider Item ${index + 1}`, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleArrowClick("right"), className: "absolute right-0 inset-y-0 z-10 flex items-center justify-center w-[40px] cursor-pointer bg-[#ffffff] bg-opacity-50", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-right text-2xl text-[#000000]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }))); }