tilted div at home page

src/components/HomeOne/HeroHomeOne.js

@@ -60,7 +60,7 @@ function HeroHomeOne() {
                     <CustomSlider
                       images={[heroThumbOne, heroThumbOne, heroThumbOne]}
                       speed="5"
-                      indicatorColor="#333"
+                      indicatorColor="#0D1133"
                     />
                   </div>
                 </div>

src/components/customSlider/CustomSlider.js

@@ -96,4 +96,83 @@ function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
   )
 }
 
-export default CustomSlider
+export default CustomSlider
+
+// import React, { useEffect, useState } from 'react';
+
+// function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
+//   const [sliderCount, setSliderCount] = useState(0);
+
+//   const sliderStart = (count) => {
+//     if (count + 1 && typeof count === 'number') {
+//       return setSliderCount(count);
+//     }
+//     if (sliderCount >= images.length - 1) {
+//       return setSliderCount(0);
+//     }
+//     setSliderCount((prev) => prev + 1);
+//   };
+
+//   useEffect(() => {
+//     const sliderInterval = setInterval(() => {
+//       sliderStart();
+//     }, speed * 1000);
+//     return () => {
+//       clearInterval(sliderInterval);
+//     };
+//   }, [sliderCount, speed]);
+
+//   console.log("This is slider count", sliderCount)
+
+//   return (
+//     <div
+//       className=""
+//       style={{ width: '100%', margin: 'auto', position: 'relative', overflow: 'hidden' }}
+//     >
+//       <div className="" style={{ width: '100%', display: 'flex' }}>
+//         {images.map((image, index) => (
+//           <img
+//             key={index}
+//             src={image}
+//             alt="image"
+//             style={{
+//               minWidth: '100%',
+//               height: 'auto',
+//               position: 'relative',
+//               transition: 'opacity .9s',
+//               opacity: sliderCount == index ? '1' : '0',
+//             }}
+//           />
+//         ))}
+//       </div>
+//       <div
+//         className="custom_indicators"
+//         style={{
+//           margin: '10px auto',
+//           display: 'flex',
+//           gap: '10px',
+//           justifyContent: 'center',
+//         }}
+//       >
+//         {images.map((image, index) => (
+//           <div
+//             key={index}
+//             onClick={() => sliderStart(index)}
+//             className={`custom_indicator ${indicatorClass}`}
+//             style={{
+//               backgroundColor: sliderCount === index ? `${indicatorColor}` : '',
+//               width: '15px',
+//               height: '15px',
+//               borderRadius: '999px',
+//               border: `1px solid ${indicatorColor}`,
+//               cursor: 'pointer',
+//             }}
+//           ></div>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default CustomSlider;
+