cómo mostrar la siguiente diapositiva después de arrastrar en la react?

Question

Estoy usando este paquete. https://www.npmjs.com/package/react-responsive- carousel . En demo http://react-responsive-carousel.js.org/usuario capaz de ir a next diapositiva después Dragging Funciona bien. pero cuando usé el mismo paquete no puedo arrastrar a la siguiente diapositiva. ¿Puedes por favor sugerirme dónde estoy haciendo mal? https://codesandbox.io/s/beautiful-carson- otvj0?file=/src/App.js this is slide 1 this is slide 2 this is slide 3 this is slide 4

techtrailblazer · Accepted Answer

He intentado usarlo yo mismo y no pude averiguar por qué el arrastrable no estaba funcionando.

Sin embargo, puedo ofrecerle paquete alternativo Carousel - siema. Es un gran carrusel ligero que se hace con JS. También hay otros paquetes construidos sobre esta puramente hecha para React.

En tu caso, te ofrezco probar react-siema.

Con él, simplemente puede utilizar el carrusel así y será arrastrable por defecto. Además, no hay necesidad de cargar ningún css.

import React from "react";
import ReactSiema from "react-siema";

const Slide = (props) => ;

const App = () => (
  
    
    
    
  
);

export default App;

Enlace al codesandbox con este ejemplo: haga clic aquí.

Enlace al react-siema: haga clic aquí.

Enlace al original siema: haga clic aquí.

He estado usando siema yo mismo y lo recomendaría para carrusels agradables y simples.

Respondida el Dec 17, 2020 a las 11:07 - por techtrailblazer

scriptsculptorbf10 · Answer

La demo que estás usando no muestra el código completo que se requiere para lograr lo que se muestra.

Para permitir el deslizamiento/arrastre, es necesario añadir los siguientes accesorios al componente Carousel.

swipeable={true}
emulateTouch={true}

A continuación se muestra un ejemplo del código que hizo referencia que permitirá la funcionalidad que desea.


      this is slide 1
      this is slide 2
      this is slide 3
      this is slide 4

Para más detalles sobre la aplicación utiliza este enlace http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--base. Puedes ver el código de demostración viendo la ficha de la historia en el lado navbar

Respondida el Dec 17, 2020 a las 11:16 - por scriptsculptorbf10

Gpt · Answer

El problema que estás experimentando parece estar relacionado con la configuración del componente Carousel del paquete react-responsive-carousel. Al revisar el código proporcionado y el enlace al sandbox, he identificado un par de errores que podrían estar causando que no puedas arrastrar a la siguiente diapositiva. Aquí te dejo algunas sugerencias para corregir estos problemas:

El uso de comillas dobles dentro de las llaves en las propiedades del componente es incorrecto. Debes pasar valores booleanos y no strings con comillas dobles para `autoplay`, `infiniteloop`, `showarrows`, `showstatus` y `showthumbs`. Debes corregir tus propiedades de esta manera:

jsx

Para habilitar la opción de arrastrar a la siguiente diapositiva, puedes agregar la propiedad `swipeable={true}` al componente `Carousel`. Esto permitirá al usuario arrastrar para pasar a la siguiente diapositiva. De esta forma:

jsx

Realiza estos ajustes en tu código y prueba nuevamente para ver si ahora puedes arrastrar a la siguiente diapositiva correctamente. Espero que esto solucione tu problema y puedas disfrutar de la funcionalidad completa del componente Carousel en react-responsive-carousel.

Respondida el Dec 18, 2020 a las 11:06 - por Gpt

Gemini · Answer

He revisado tu código y el paquete que estás usando, y parece que estás usando el componente Carousel correctamente. Sin embargo, hay un pequeño error en tu código que impide que el arrastre funcione.

En tu código, has utilizado comillas dobles (") dentro de las comillas dobles que se utilizan para definir el estilo del div. Esto está causando un error de sintaxis.

Aquí tienes el código corregido:



  fff", height: "200px", color: "black" }}>this is slide 1
  fff", height: "200px", color: "black" }}>this is slide 2
  fff", height: "200px", color: "black" }}>this is slide 3
  fff", height: "200px", color: "black" }}>this is slide 4

He eliminado las comillas dobles adicionales dentro de las comillas dobles que se utilizan para definir el estilo de los div. Ahora el código debería funcionar correctamente y permitir el arrastre para navegar por las diapositivas.

También te recomiendo que utilices una herramienta como ESLint para ayudarte a identificar errores de sintaxis y otros problemas de código.

Respondida el Dec 18, 2020 a las 11:13 - por Gemini

cómo mostrar la siguiente diapositiva después de arrastrar en la react?

4 Respuestas: