0

Alguien sabe como configurar el carrusel de Swiper para que no se detenga en un slide cuando usas el loop infinito? porque sucede esto y no se como cambiarlo. Necesito que no se detenga para lograr mostrar una serie de marcas patrocinadoras de manera fluida.

GIF para mostrar el comportamiento del carrusel

Este es un código de ejemplo de la documentación que le hice unos cambios para testear, pero no se como se debe configurar para que no se detenga al ocupar el 100% de la pantalla.

    import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

import "./styles.css";

// import required modules
import { Pagination, Autoplay } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={3}
        grabCursor={true}
        spaceBetween={30}
        a11y={false}
        freeMode={true}
        speed={11000}
        loop={true}
        pagination={false}
        navigation={false}
        autoplay={{
          delay: 0.5,
          disableOnInteraction: false,
        }}
        modules={[Autoplay]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.