D
Size: a a a
СД
PD
PD
СД
СД
АЛ
АЛ
MZ
import React, {useEffect, useState} from "react"
import "./Slider.css"
import SlideImg1 from "../../img/slide_first.png"
import SlideImg2 from "../../img/slide_second.png"
import SlideImg3 from "../../img/slide_third.png"
export default function Slider () {
const sliderArr = [
<img
src={SlideImg1} alt="slider"
key={SlideImg1} style={{height: "100%"}}
/>,
<img
src={SlideImg2} alt="slider2"
key={SlideImg2} style={{height: "100%"}}
/>,
<img
src={SlideImg3} alt="slider3"
key={SlideImg3} style={{height: "100%"}}
/>
]
const [x, setX] = useState(0)
useEffect(() => {
const id = setInterval(() => {
if (x === -200) {
setX(0)
} else {
setX(x => x - 100)
}
}, 4000)
return () => clearInterval(id)
}, [x])
return (
<div className="custom-slider">
{
sliderArr.map((item, index) => {
return (
<div
key={index}
className="custom-slide"
style={{transform: `translateX(${x}%)`}}
>
{item}
</div>
)
})
}
</div>
)
}
S
import React, {useEffect, useState} from "react"
import "./Slider.css"
import SlideImg1 from "../../img/slide_first.png"
import SlideImg2 from "../../img/slide_second.png"
import SlideImg3 from "../../img/slide_third.png"
export default function Slider () {
const sliderArr = [
<img
src={SlideImg1} alt="slider"
key={SlideImg1} style={{height: "100%"}}
/>,
<img
src={SlideImg2} alt="slider2"
key={SlideImg2} style={{height: "100%"}}
/>,
<img
src={SlideImg3} alt="slider3"
key={SlideImg3} style={{height: "100%"}}
/>
]
const [x, setX] = useState(0)
useEffect(() => {
const id = setInterval(() => {
if (x === -200) {
setX(0)
} else {
setX(x => x - 100)
}
}, 4000)
return () => clearInterval(id)
}, [x])
return (
<div className="custom-slider">
{
sliderArr.map((item, index) => {
return (
<div
key={index}
className="custom-slide"
style={{transform: `translateX(${x}%)`}}
>
{item}
</div>
)
})
}
</div>
)
}
MZ
DB
LE
DB
V
SomeParentClass.staticMethod()