WrenchBoardMainSite/src/components/customSlider/CustomSlider.js

// import React, { useEffect, useState, useRef } from 'react'

// function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
//     const imageElement = useRef()
//     let [sliderCount, setSliderCount] = useState(0)

//     const sliderStart = (count) => {
//         imageElement.current.classList.add('sliding-images')
//         setTimeout(()=>{
//             imageElement.current.classList.remove('sliding-images')
//         }, 1000)
//         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])

//   return (
//     <div className='' style={{width:'100%', margin:'auto', position:'relative', overflow: 'hidden'}}>
//         <img ref={imageElement} className={`sliding-images`} src={images[sliderCount]} alt='image' style={{width:'100%', height:'auto'}} />
//         <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

import React, { useEffect, useState } from 'react'

function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
    let [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])

  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:'.9s', right:`${sliderCount == index ? sliderCount*100+'%':'-100%'}`, opacity:`${sliderCount == index ? '1':'0'}`}} 
                    // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, 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

// 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;