victorAnumudu
99 lines
3.9 KiB
JavaScript
99 lines
3.9 KiB
JavaScript
// 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 |