Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image

src/components/HomeOne/HeroHomeOne.js

@@ -5,6 +5,7 @@ import shapeTwo from '../../assets/images/shape/shape-2.png';
 import shapeThree from '../../assets/images/shape/shape-3.png';
 import shapeFour from '../../assets/images/shape/shape-4.png';
 import getConfig from './../../Config/config'
+import CustomSlider from '../customSlider/CustomSlider';
 
 
 function HeroHomeOne() {
@@ -44,7 +45,14 @@ function HeroHomeOne() {
                                     data-wow-duration="2000ms"
                                     data-wow-delay="200ms"
                                 >
-                                    <img src={heroThumbOne} alt="WrenchBoard" />
+                                    {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                                    <div style={{width: '350px', margin: 'auto'}}>
+                                        <CustomSlider
+                                            images={[heroThumbOne, heroThumbOne, heroThumbOne]}
+                                            speed='5'
+                                            indicatorColor='#333'
+                                        />
+                                    </div>
                                 </div>
                                 <div
                                     className="thumb-2 wow animated fadeInRight"

src/components/customSlider/CustomSlider.js

@@ -0,0 +1,99 @@
+// 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