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

optimization

Browse Source
This commit was merged in pull request #46.
This commit is contained in:
Chukwumdiebube Ojinta
2023-11-03 03:43:26 -07:00
parent ce0bb90b51
commit 23bbad6552
10 changed files with 253 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/customSlider/CustomSlider.js
+77 -168
View File
@@ -1,178 +1,87 @@
// import React, { useEffect, useState, useRef } from 'react'
import React, { useEffect, useState } from "react";
// function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
// const imageElement = useRef()
// let [sliderCount, setSliderCount] = useState(0)
function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
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)
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)
useEffect(() => {
const sliderInterval = setInterval(() => {
sliderStart();
}, speed * 1000);
return () => {
clearInterval(sliderInterval)
}
},[sliderCount])
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
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%",
maxHeight: "695px",
height: "100%",
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;
export default CustomSlider;