Tengo un slide de imágenes me funciona correctamente pero no me esta cambiando las imágenes de forma automática me toca siempre darle a la flecha ya sea de adelante o de atrás, he intentado varias formas para lograr que las imágenes vayan rotando pero no he logrado que roten de forma automática las imágenes, si alguien me puede ayudar se los agradecería he intentado pero no he logrado que las imágenes que carga roten de forma automática. envió mi código fuente y en codesandbox.io envió mi proyecto funcionando.
https://codesandbox.io/s/brave-scott-32yh4t?file=/src/App.js
code:
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Fade } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
function App() {
const [ruta, setRuta1] = useState([""]);
const peticionGet_imagenes1 = async () => {
await axios
.get(`https://aliraweb.com/apiAliraweb/anuncios_img/index1.php`)
.then((res) => {
setRuta1(res.data);
})
.catch((error) => {
console.log(error);
});
};
useEffect(() => {
peticionGet_imagenes1();
}, [ruta]);
const fadeProperties = {
duration: 5000,
transitionDuration: 500,
infinite: true,
indicators: true,
onChange: (oldIndex, newIndex) => {
console.log(`fade transition from ${oldIndex} to ${newIndex}`);
}
};
return (
<div id="content" class="app-content">
<ol class="breadcrumb float-xl-end"></ol>
<div class="row"></div>
<div class="row">
<div class="col-xl-12">
<div
class="panel panel-inverse"
data-sortable-id="form-stuff-1"
data-init="true"
>
<div class="panel-heading ui-sortable-handle">
<div class="panel-heading-btn">
<a
href="javascript:;"
class="btn btn-xs btn-icon btn-default"
data-toggle="panel-expand"
title="Expandir"
>
<i class="fa fa-expand"></i>
</a>
</div>
</div>
<div class="panel-body">
<div className="slide-container" style={{ width: "100%" }}>
<Fade {...fadeProperties}>
{ruta?.map((item, index) => (
<div className="each-slide-effect">
<a href={`${item.link1}`}>
<img
key={index}
style={{ width: "100%" }}
src={`https://aliraweb.com/apiAliraweb/fotos_anuncios/Imagenes/${item.ruta}`}
/>
</a>
</div>
))}
</Fade>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;