react-id-swiper: Usar la barra de desplazamiento para cambiar las diapositivas no funciona sin habilitar el modo CssMode, no detectará el desplazamiento.

15 Jul, 2023 Programación 0

Estoy tratando de crear un swiper que tenga una altura de 100vh. Básicamente, cuando el usuario desplaza la página hacia abajo, cuando toda la diapositiva esté en su campo de visión, el swiper comienza y cuando el usuario desplaza hacia arriba/abajo, puede moverse entre diapositivas. Por ejemplo, al desplazarse hacia abajo desde la Diapositiva 1, irá a la Diapositiva 2. Al desplazarse hacia arriba desde la Diapositiva 4, irá a la Diapositiva 3.

Sin embargo, al utilizar la API y habilitar la rueda del mouse para desplazarse entre diapositivas, no detecta el desplazamiento. El arrastre del mouse todavía funciona para cambiar de diapositiva, pero la rueda del mouse no hace absolutamente nada.

Sin embargo, cuando habilito el cssmode como una propiedad en la configuración, funciona bien (aunque no puedo usarlo ya que limita algunas funcionalidades que necesito). ¿Puede alguien ayudarme a descubrir cuál es el problema?

Código:

React/Next:

import Swiper from "react-id-swiper";
import "swiper/swiper-bundle.css";
const FullScreenSwiper = ({ componentData }) => {
  const settings = {
    direction: "vertical",
    slidesPerView: 1,
    spaceBetween: 30,
    mousewheel: true,
    cssMode: true, // con esto habilitado, funciona bien. Sin habilitarlo, no funciona
    on: {
      scroll: function () {
        console.log("swiper scrolled");
      },
    },
  };

  return (
      <div class="swiper mySwiper">
        <swiper {...settings}="">
          <div class="swiper-slide">Diapositiva 1</div>
          <div class="swiper-slide">Diapositiva 2</div>
          <div class="swiper-slide">Diapositiva 3</div>
          <div class="swiper-slide">Diapositiva 4</div>
          <div class="swiper-slide">Diapositiva 5</div>
        </swiper>
      </div>
  );
};

export default FullScreenSwiper;

SCSS:

.swiper-container {
  height: 100%;
}

body,
html {
  height: 100%;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  width: 100%;
  height: 600px;
  position: relative;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  &:nth-child(1) {
    background: #d8e2dc;
  }
  &:nth-child(2) {
    background: #ffe5d9;
  }
  &:nth-child(3) {
    background: #ffcad4;
  }
  &:nth-child(4) {
    background: #f4acb7;
  }
}

davy.ai

July 15, 2023 at 8:57 pm

Parece que el problema con la rueda del ratón que no detecta el desplazamiento al usar la API podría estar relacionado con el hecho de que la altura del contenedor del swiper está configurada al 100% y no se ha establecido una altura fija para las diapositivas. Esto podría estar impidiendo que la rueda del ratón detecte correctamente el evento de desplazamiento.

Una posible solución podría ser establecer una altura fija para las diapositivas en CSS, en lugar de utilizar la altura al 100%:

.swiper-slide {
  height: 100vh; // Establece una altura fija, en este caso 100vh
  width: 100%;
  position: relative;
}

Otro problema que podría estar afectando al swiper es el hecho de que Next.js utiliza el rendering del lado del servidor (SSR) de forma predeterminada. Esto podría evitar que algunas bibliotecas del lado del cliente funcionen correctamente.

Para evitar problemas de SSR, puedes envolver tu componente swiper con noSSR del módulo next/dynamic:

import dynamic from 'next/dynamic'

const FullScreenSwiper = dynamic(
  () => import('./components/FullScreenSwiper'),
  { ssr: false }
)

export default function Home() {
  return (
    <div>
      <h1>Hola mundo</h1>
      <fullscreenswiper></fullscreenswiper>
    </div>
  )
}

Esto asegurará que el swiper solo se renderice en el lado del cliente y evitará cualquier problema relacionado con SSR.

Answer

davy.ai

July 15, 2023 at 8:57 pm
Parece que el problema con la rueda del ratón que no detecta el desplazamiento al usar la API podría estar relacionado con el hecho de que la altura del contenedor del swiper está configurada al 100% y no se ha establecido una altura fija para las diapositivas. Esto podría estar impidiendo que la rueda del ratón detecte correctamente el evento de desplazamiento.

Una posible solución podría ser establecer una altura fija para las diapositivas en CSS, en lugar de utilizar la altura al 100%:
```
.swiper-slide {
  height: 100vh; // Establece una altura fija, en este caso 100vh
  width: 100%;
  position: relative;
}
```
Otro problema que podría estar afectando al swiper es el hecho de que Next.js utiliza el rendering del lado del servidor (SSR) de forma predeterminada. Esto podría evitar que algunas bibliotecas del lado del cliente funcionen correctamente.

Para evitar problemas de SSR, puedes envolver tu componente swiper con noSSR del módulo next/dynamic:
```
import dynamic from 'next/dynamic'

const FullScreenSwiper = dynamic(
  () => import('./components/FullScreenSwiper'),
  { ssr: false }
)

export default function Home() {
  return (
    <div>
      <h1>Hola mundo</h1>
      <fullscreenswiper></fullscreenswiper>
    </div>
  )
}
```
Esto asegurará que el swiper solo se renderice en el lado del cliente y evitará cualquier problema relacionado con SSR.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

react-id-swiper: Usar la barra de desplazamiento para cambiar las diapositivas no funciona sin habilitar el modo CssMode, no detectará el desplazamiento.

Answer

davy.ai