Membuat Komponen Carousel Sederhana di React?

Membuat Carousel atau image slideshow di web bisa jadi pekerjaan yang membosankan. Atau bisa jadi malas memikirkan bagaimana caranya wkwk. Jadi saya share bagaimana caranya beserta kodenya disini. Inti dari carousel adalah beberapa array gambar photo. Jadi pastikan memiliki sejumlah array photo. Lalu untuk mengatur sudah sampai array ke berapa pakai state counter.

Begini contohnya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React from 'react'

const URL = 'URL mu disini'

class ModuleCarousel extends React.Component {
constructor(props){
super(props);
this.state = {
counter: 0,
maxCounter: 0
}
this.handleNext = this.handleNext.bind(this);
this.handleBack = this.handleBack.bind(this);
}

componentDidMount(){
const arraySize = this.props.photo.length - 1;
this.setState({
maxCounter: arraySize
})
}

handleNext(){
if(this.state.counter < this.state.maxCounter){
this.setState({
counter: this.state.counter + 1
})
} else if (this.state.counter === this.state.maxCounter){
this.setState({
counter: 0
})
}
}

handleBack(){
if(this.state.counter <= this.state.maxCounter && this.state.counter > 0){
this.setState({
counter: this.state.counter - 1
})
} else if(this.state.counter === 0){
this.setState({
counter: this.state.maxCounter
})
}
}

render () {
let photoData = this.props.photo;
console.log('photoData', photoData)
return (
<div className="container" >
<img src={URL + photoData[this.state.counter]} />
<button onClick={this.handleBack}> back </button>
<button onClick={this.handleNext}> next </button>
</div>
)
}
}

export default ModuleCarousel;

Nethogs

Untuk menggunakannya tinggal import komponen ModuleCarousel ini, dengan properti photo yg berisi array