-1
Gallery export function () { const [estadogaleria, setestadogaleria] = useState (false) const [indice_galeria, setindice_galeria] = useState (0) const [indicehome, setindicehome] = useState (0) const [indicemostrado_galeria, setindicemostrado_galeria] = useState (1) const [total_itens_array, settotal_itens_array] = useState (') const aguia = [ '/images/aguia/aguia1.png', '/images/aguia/aguia2.png', '/images/aguia/aguia3.png', '/images/aguia/aguia4.png', '/images/aguia/aguia5.png', ]
const cobra = [
'/imagens/cobra/cobra1.png',
'/imagens/cobra/cobra2.png',
'/imagens/cobra/cobra3.png',
'/imagens/cobra/cobra4.png',
'/imagens/cobra/cobra5.png',
]
const gorila = [
'/imagens/gorila/gorila1.png',
'/imagens/gorila/gorila2.png',
'/imagens/gorila/gorila3.png',
'/imagens/gorila/gorila4.png',
'/imagens/gorila/gorila5.png',
]
cavalo const = [
'/imagens/horse/horse1.png',
'/imagens/horse/horse2.png',
'/imagens/horse/horse3.png',
'/imagens/horse/horse4.png',
]
const leao = [
'/imagens/leao/leao1.png',
'/imagens/leao/leao2.png',
'/imagens/leao/leao3.png',
'/imagens/leao/leao4.png',
'/imagens/leao/leao5.png',
]
const pitbull = [
'/imagens/pitbull/pitbull1.png',
'/imagens/pitbull/pitbull2.png',
'/imagens/pitbull/pitbull3.png',
'/imagens/pitbull/pitbull4.png',
]
tubarão const = [
'/imagens/shark/shark1.png',
'/imagens/shark/shark2.png',
'/imagens/shark/shark3.png',
'/imagens/shark/shark4.png',
]
const urso = [
'/imagens/urso/urso1.png',
'/imagens/urso/urso2.png',
'/imagens/urso/urso3.png',
'/imagens/urso/urso4.png',
'/imagens/urso/urso5.png',
'/imagens/urso/urso6.png',
]
const [imagemGaleria, setimagemGaleria] = useState (null)
const teste = useEffect (() => {
if (indicehome === 1) {
setimagemGaleria (aguia [indice_galeria])
if (indice_galeria> = aguia.length) {
setindice_galeria (aguia.length-1)
}
if (indicemostrado_galeria> aguia.length) {
setindicemostrado_galeria (aguia.length)
}
}
if (indicehome === 2) {
setimagemGaleria (cobra [indice_galeria])
if (indice_galeria> = cobra.length) {
setindice_galeria (cobra.length-1)
}
if (indicemostrado_galeria> cobra.length) {
setindicemostrado_galeria (cobra.length)
}
}
if (indicehome === 3) {
setimagemGaleria (gorila [indice_galeria])
if (indice_galeria> = gorila.length) {
setindice_galeria (gorila.length-1)
}
if (indicemostrado_galeria> gorila.length) {
setindicemostrado_galeria (gorila.length)
}
}
if (indicehome === 4) {
setimagemGaleria (horse [indice_galeria])
if (indice_galeria> = horse.length) {
setindice_galeria (horse.length-1)
}
if (indicemostrado_galeria> horse.length) {
setindicemostrado_galeria (horse.length)
}
}
if (indicehome === 5) {
setimagemGaleria (leao [indice_galeria])
if (indice_galeria> = leao.length) {
setindice_galeria (leao.length-1)
}
if (indicemostrado_galeria> leao.length) {
setindicemostrado_galeria (leao.length)
}
}
if (indicehome === 6) {
setimagemGaleria (pitbull [indice_galeria])
if (indice_galeria> = pitbull.length) {
setindice_galeria (pitbull.length-1)
}
if (indicemostrado_galeria> pitbull.length) {
setindicemostrado_galeria (pitbull.length)
}
}
if (indicehome === 7) {
setimagemGaleria (shark [indice_galeria])
if (indice_galeria> = shark.length) {
setindice_galeria (shark.length-1)
}
if (indicemostrado_galeria> shark.length) {
setindicemostrado_galeria (shark.length)
}
}
if (indicehome === 8) {
setimagemGaleria (urso [indice_galeria])
if (indice_galeria> = urso.length) {
setindice_galeria (urso.length-1)
}
if (indicemostrado_galeria> urso.length) {
setindicemostrado_galeria (urso.length)
}
}
}, [indice_galeria])
Function showgallery () {
setestadogaleria (! estadogaleria)
setindice_galeria (0)
setindicemostrado_galeria (1)
}
Retorna(
<>
<div onClick = {showgaleria} className = 'galeriahome'>
<img onClick = {() => {setindicehome (1); setimagemGaleria (aguia [indice_galeria]); settotal_itens_array (aguia.length)}} id = 'aguia'src =' / imagens / aguia / aguia1.png '/>
<img onClick = {() => {setindicehome (2); setimagemGaleria (cobra [indice_galeria]); settotal_itens_array (cobra.length)}} id = 'cobra' src = '/ imagens / cobra / cobra1.png' />
<img onClick = {() => {setindicehome (3); setimagemGaleria (gorila [indice_galeria]); settotal_itens_array (gorila.length)}} id = 'gorila'src =' / imagens / gorila / gorila1.png '/>
<img onClick = {() => {setindicehome (4); setimagemGaleria (horse [indice_galeria]); settotal_itens_array (horse.length)}} id = 'horse'src =' / imagens / horse / horse1.png '/>
<img onClick = {() => {setindicehome (5); setimagemGaleria (leao [indice_galeria]); settotal_itens_array (leao.length)}} id = 'leao' src = '/ imagens / leao / leao1.png' />
<img onClick = {() => {setindicehome (6); setimagemGaleria (pitbull [indice_galeria]); settotal_itens_array (pitbull.length)}} id = 'pitbull' src = '/ imagens / pitbull / pitbull1.png' />
<img onClick = {() => {setindicehome (7); setimagemGaleria (shark [indice_galeria]); settotal_itens_array (shark.length)}} id = 'shark' src = '/ imagens / shark / shark1.png' />
<img onClick = {() => {setindicehome (8); setimagemGaleria (urso [indice_galeria]); settotal_itens_array (urso.length)}} id = 'urso' src = '/ imagens / urso / urso1.png' />
</div>;
<div className = {estadogaleria? 'GaleriaVisible': 'GaleriaClosed'}>
<img src = {imagemGaleria} />
<div> {indicemostrado_galeria} / {total_itens_array} </div>
<button id = 'seta para a esquerda' onClick = {() => {
setindice_galeria (indice_galeria-1)
setindicemostrado_galeria (indicemostrado_galeria-1)
if (indice_galeria <= 0) {
setindice_galeria (0)
}
if (indicemostrado_galeria <= 1) {
setindicemostrado_galeria (1)
}
}
}> </button>
<button id = 'seta para a direita' onClick = {() => {
setindice_galeria (indice_galeria + 1)
setindicemostrado_galeria (indicemostrado_galeria + 1)
}}
> </button>
</div>
</>
)
}
SOLVED !!! IT WAS A BUG OF MY GOOGLE CHROME because Aundo opened by the edge worked perfectly .
– user219338
Please clarify your problem or provide additional details in order to highlight exactly what you need. The way it’s written these days it’s hard to tell exactly what you’re asking.
–