WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

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

Browse Source
This commit is contained in:
Ebube
2023-08-28 18:35:13 +01:00
parent 8927614cd6 3e415062fa
commit 81fe0f6acf
2 changed files with 108 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeOne/HeroHomeOne.js
+9 -1
View File
@@ -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
+99
View File
@@ -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