Aprenda cómo esta conveniente biblioteca puede habilitar una interfaz deslizable en sus aplicaciones con un mínimo esfuerzo.

A medida que los dispositivos móviles se vuelven más populares, las interfaces deslizables se han convertido en una forma estándar de interactuar con las aplicaciones. Las interfaces deslizables son esenciales para brindar la mejor experiencia de usuario a los usuarios móviles.

Swiper es una biblioteca versátil que le permite crear interfaces deslizables en sus aplicaciones React. Descubra cómo puede crear interfaces deslizables en su aplicación React usando Swiper.

Instalación de Swiper

Swiper es una de las muchas bibliotecas que puede usar para personalizar su aplicación React. Para comenzar con Swiper, debe instalarlo en su aplicación React. Puede hacer esto con el siguiente comando de terminal que debe ejecutar en el directorio raíz de su proyecto:

npm instalar swiper

Una vez que haya instalado Swiper, puede usarlo en su aplicación.

Creación de interfaces deslizables

instagram viewer

Después de instalar Swiper en su aplicación React, puede crear interfaces deslizables. Comience por importar el Swiper y SwiperSlide componentes de la biblioteca Swiper.

El componente Swiper es el componente principal de la biblioteca Swiper. Define la estructura, el comportamiento y la funcionalidad de los elementos deslizables. El componente SwiperSlide es un componente secundario del componente Swiper. Define diapositivas individuales que están dentro del componente Swiper.

Aquí hay un ejemplo de una interfaz deslizable usando los componentes Swiper y SwiperSlide:

importar Reaccionar de'reaccionar';
importar { Swiper, SwiperSlide} de"deslizar/reaccionar";
importar'swiper/css';
funciónaplicación() {
devolver (





<divisiónnombre de la clase='elemento'>Elemento 1división></SwiperSlide>
<divisiónnombre de la clase='elemento'>elemento 2división></SwiperSlide>
<divisiónnombre de la clase='elemento'>elemento 3división></SwiperSlide>
<divisiónnombre de la clase='elemento'>Elemento 4división></SwiperSlide>
 </Swiper>
 </div>
 )
}

exportarpor defecto aplicación

Además de Swiper y SwiperSlide componentes, este bloque de código importa la hoja de estilo predeterminada para Swiper usando el deslizador/css módulo.

Luego, el ejemplo envuelve un componente Swiper alrededor de cuatro componentes secundarios SwiperSlide. Cada SwiperSlide contiene un división elemento con el nombre de la clase atributo. Puede usar className para diseñar los elementos div:

.elemento {
tamaño en línea: 100píxeles;
borde-radio: 12píxeles;
relleno: 1movimiento rápido del ojo;
color: #333333;
color de fondo: #e2e2e2;
Familia tipográfica: cursivo;
}

Personalización de su interfaz deslizable

Después de crear con éxito una interfaz deslizable, puede mejorar su apariencia y funcionalidad para satisfacer sus necesidades.

Con Swiper, puede personalizar el comportamiento y la apariencia de la interfaz utilizando varias opciones. Pasas estas opciones al Swiper componente como accesorios en reaccionar:

importar Reaccionar de'reaccionar';
importar { Swiper, SwiperSlide} de"deslizar/reaccionar";
importar'swiper/css';
funciónaplicación() {
devolver (




 espacioentre={30}
 slidesPerView={2}
 bucle={ verdadero }
 >
<divisiónnombre de la clase='elemento'>Elemento 1división></SwiperSlide>
<divisiónnombre de la clase='elemento'>elemento 2división></SwiperSlide>
<divisiónnombre de la clase='elemento'>elemento 3división></SwiperSlide>
<divisiónnombre de la clase='elemento'>Elemento 4división></SwiperSlide>
 </Swiper>
 </div>
 )
}

exportarpor defecto aplicación

En este ejemplo, el componente Swiper incluye tres accesorios: espacio entre, diapositivas por vista, y bucle. El espacio entre prop establece el espacio entre cada diapositiva, en este caso 30 píxeles.

Utilizando el diapositivas por vista prop, puede establecer el número de diapositivas visibles a la vez. En este caso, el diapositivas por vista prop se establece en 2, lo que hace que Swiper componente para mostrar dos diapositivas simultáneamente.

Por último, el bucle prop especifica si las diapositivas deben repetirse infinitamente o no. En este ejemplo, las diapositivas se repetirán infinitamente porque el bucle valor prop es verdadero.

Configuración de sus interfaces deslizables con módulos

Puede configurar aún más el comportamiento de su interfaz deslizable con Módulos JavaScript proporcionada por la biblioteca Swiper. Algunos de los módulos que ofrece son Navegación, Auto-reproducción, Paginación, y Barra de desplazamiento.

Para usar cualquiera de estos módulos en su aplicación, debe importarlos desde la biblioteca Swiper. También debe importar los estilos CSS correspondientes para los módulos y pasar sus nombres al Swiper componente usando el módulos apuntalar.

Por ejemplo, así es como puedes usar el Navegación módulo para configurar sus interfaces deslizables:

importar Reaccionar de"reaccionar";
importar { Swiper, SwiperDeslizar } de"deslizar/reaccionar";
importar { Navegación } de"swiper";
importar"deslizador/css";
importar"swiper/css/navegación";
funciónaplicación() {
devolver (




 espacioentre={30}
 slidesPerView={2}
 módulos={[Navegación]}
 bucle={verdadero}
 navegación={verdadero}
 >
<divisiónnombre de la clase="elemento">Elemento 1división></SwiperSlide>
<divisiónnombre de la clase="elemento">elemento 2división></SwiperSlide>
<divisiónnombre de la clase="elemento">elemento 3división></SwiperSlide>
<divisiónnombre de la clase="elemento">Elemento 4división></SwiperSlide>
 </Swiper>
 </div>
 );
}

exportarpor defecto aplicación;

Este bloque de código importa el Navegación módulo y su estilo CSS, luego especifica el módulo en el módulos apoyo de la Swiper componente. El módulos prop habilita y configura módulos proporcionados por la biblioteca Swiper.

El módulo de navegación proporciona funcionalidad de navegación al componente Swiper. Agrega botones de flecha anterior y siguiente en los que puede hacer clic o tocar para pasar a la diapositiva anterior o siguiente.

El navegación prop value es verdadero, lo que hará que los botones anterior y siguiente se muestren en la pantalla.

Configuración de interfaces deslizables con reproducción automática

El Auto-reproducción El módulo permite que el control deslizante haga la transición entre las diapositivas automáticamente sin la interacción del usuario.

Aquí hay un ejemplo de cómo configurar su interfaz deslizable usando el Auto-reproducción módulo:

importar Reaccionar de"reaccionar";
importar { Swiper, SwiperDeslizar } de"deslizar/reaccionar";
importar { Auto-reproducción } de"swiper";
importar"deslizador/css";
importar"swiper/css/reproducción automática";
funciónaplicación() {
devolver (




 espacioentre={30}
 slidesPerView={2}
 módulos = {[Reproducción automática]}
 bucle={verdadero}
 reproducción automática={{ demora: 3000 }}
 >
<divisiónnombre de la clase="elemento">Elemento 1división></SwiperSlide>
<divisiónnombre de la clase="elemento">elemento 2división></SwiperSlide>
<divisiónnombre de la clase="elemento">elemento 3división></SwiperSlide>
<divisiónnombre de la clase="elemento">Elemento 4división></SwiperSlide>
 </Swiper>
 </div>
 );
}

exportarpor defecto aplicación;

Utilizando el auto-reproducción prop, puede especificar el demora; en este caso, se establece en 3000 milisegundos.

Configuración de interfaces deslizables con paginación

Otro módulo Swiper importante es Paginación. El Paginación El módulo le permite agregar viñetas de paginación o indicadores de barra de progreso al control deslizante, brindando a los usuarios una representación visual de la cantidad de diapositivas y su posición actual dentro del control deslizante.

Usar el Paginación módulo, necesita importarlo e incluirlo en el módulos apoyo de la Swiper componente:

importar Reaccionar de"reaccionar";
importar { Swiper, SwiperDeslizar } de"deslizar/reaccionar";
importar { Paginación } de"swiper";
importar"deslizador/css";
importar"swiper/css/paginación";
funciónaplicación() {
devolver (




 espacioentre={30}
 slidesPerView={2}
 módulos = {[Paginación]}
 bucle={verdadero}
 paginación={{ clicable: verdadero }}
 >
<divisiónnombre de la clase="elemento">Elemento 1división></SwiperSlide>
<divisiónnombre de la clase="elemento">elemento 2división></SwiperSlide>
<divisiónnombre de la clase="elemento">elemento 3división></SwiperSlide>
<divisiónnombre de la clase="elemento">Elemento 4división></SwiperSlide>
 </Swiper>
 </div>
 );
}

exportarpor defecto aplicación;

Este bloque de código proporciona la funcionalidad de paginación con el Paginación módulo. También permite a los usuarios hacer clic en el paginación balas configurando el clicable propiedad de la paginación apoyo a la verdad.

Además de la biblioteca Swiper paginación módulo, reaccionar-paginar es otra excelente opción para crear paginación en su aplicación React.

Creación de aplicaciones accesibles con React

Las interfaces deslizables mejoran la experiencia de usuario de su aplicación para los usuarios de pantalla táctil. Swiper ofrece mucha flexibilidad y puede personalizarlo fácilmente según las necesidades de su aplicación.

Varias bibliotecas de interfaz de usuario pueden ayudar a que sus aplicaciones React sean más accesibles. Estas bibliotecas proporcionan características y funcionalidades que mejoran la experiencia del usuario de su aplicación.