1 | import React from 'react'
|
---|
2 | import { useState } from 'react'
|
---|
3 |
|
---|
4 |
|
---|
5 | const ImageSlider = ({ slides }) => {
|
---|
6 | const [currentIndex, setCurrentIndex] = useState(0);
|
---|
7 |
|
---|
8 | const sliderStyles = {
|
---|
9 | height: "100%",
|
---|
10 | position: "relative",
|
---|
11 | }
|
---|
12 |
|
---|
13 | const slideStyles = {
|
---|
14 | display: "flex",
|
---|
15 | justifyContent: "space-between",
|
---|
16 | alignItems: "center",
|
---|
17 | width: "100%",
|
---|
18 | height: "100%",
|
---|
19 | backgroundPosition: "center",
|
---|
20 | backgroundSize: 'cover',
|
---|
21 | backgroundImage: `url(${slides[currentIndex].url})`
|
---|
22 | }
|
---|
23 |
|
---|
24 | const leftArrowStyle = {
|
---|
25 | fontSize: '60px',
|
---|
26 | color: '#fff',
|
---|
27 | userSelect: 'none',
|
---|
28 | zIndex: 2,
|
---|
29 | cursor: 'pointer',
|
---|
30 | marginLeft: "10px",
|
---|
31 | };
|
---|
32 |
|
---|
33 | const rightArrowStyle = {
|
---|
34 | fontSize: '60px',
|
---|
35 | userSelect: 'none',
|
---|
36 | color: '#fff',
|
---|
37 | zIndex: 2,
|
---|
38 | cursor: 'pointer',
|
---|
39 | marginRight: "10px",
|
---|
40 | };
|
---|
41 |
|
---|
42 | const goToPrevious = () =>{
|
---|
43 | const isFirstSlide = currentIndex === 0;
|
---|
44 | const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
|
---|
45 | setCurrentIndex(newIndex);
|
---|
46 | }
|
---|
47 |
|
---|
48 | const goToNext = () =>{
|
---|
49 | const isLastSlide = currentIndex === slides.length - 1;
|
---|
50 | const newIndex = isLastSlide ? 0 : currentIndex + 1;
|
---|
51 | setCurrentIndex(newIndex);
|
---|
52 | }
|
---|
53 |
|
---|
54 | /*
|
---|
55 | const slideBtnContainer = {
|
---|
56 | display: "flex",
|
---|
57 | justifyContent: "center",
|
---|
58 | alignItems: "center",
|
---|
59 | marginTop: "5px",
|
---|
60 |
|
---|
61 | }
|
---|
62 |
|
---|
63 | const slideBtn = {
|
---|
64 | marginLeft: "5px",
|
---|
65 | width: "20px",
|
---|
66 | height: "20px",
|
---|
67 | borderRadius: "50%",
|
---|
68 | backgroundColor: "grey",
|
---|
69 | cursor: "pointer",
|
---|
70 | }
|
---|
71 |
|
---|
72 | const changeSlide = (index) =>{
|
---|
73 | setCurrentIndex(index);
|
---|
74 | }
|
---|
75 |
|
---|
76 | <div style={slideBtnContainer}>
|
---|
77 | <button style={slideBtn} onClick={()=>changeSlide(0)}></button>
|
---|
78 | <button style={slideBtn} onClick={()=>changeSlide(1)}></button>
|
---|
79 | <button style={slideBtn} onClick={()=>changeSlide(2)}></button>
|
---|
80 | </div>
|
---|
81 | */
|
---|
82 |
|
---|
83 | return(
|
---|
84 | <div style={sliderStyles}>
|
---|
85 |
|
---|
86 | <div style={slideStyles}>
|
---|
87 | <div style={leftArrowStyle} onClick={goToPrevious}>{"<"}</div>
|
---|
88 | <div style={rightArrowStyle} onClick={goToNext}>{">"}</div>
|
---|
89 | </div>
|
---|
90 |
|
---|
91 |
|
---|
92 | </div>
|
---|
93 | )
|
---|
94 | }
|
---|
95 |
|
---|
96 | export default ImageSlider |
---|