0

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;

1 respuesta 1

1

Hacé tu petición cuando se monta tu componente en lugar de hacerla cada vez que la ruta cambie. Eso arregla el problema

useEffect(() => {
    peticionGet_imagenes1();
  }, []);
2
  • el problema que detecte es que al colocar el mouse sobre la imagen que esta rotando deja de rotar como soluciono esa parte ?
    – Giovanny
    el 24 jul. a las 19:06
  • 1
    @Giovanny eso lo puedes averiguar leyendo la documentacion, dice que la propiedad pauseOnHover es por defecto true asi que solo deberias agregarla con el valor false dentro de tu objeto fadeProperties -> react-slideshow-image.netlify.app
    – Agustin G.
    el 24 jul. a las 19:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.