Swiper.js en ReactJS, Creando Carousels Interactivos.
toscadev
@ ToscaDevsJS
Si estás buscando una forma de presentar imágenes o contenido de una manera atractiva y con una experiencia de usuario fluida, Swiper.js es la elección perfecta.
Configuración Inicial e instalación de Swiper.js
npm install swiper
Asegúrate de importar las partes necesarias en tu componente. Aquí hay un ejemplo de cómo importar Swiper y sus componentes en tu archivo de React:
App
App/components/SwiperHome.tsximport { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "./TuEstilo.css"; // Importa tu hoja de estilos personalizada
//ejemplo de uso
<Swiper>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>;
App
App/components/SwiperHome.tsximport React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
const SwiperHome = () => {
return (
<Swiper
spaceBetween={50}
slidesPerView={1}
navigation
pagination={{ clickable: true }}
>
{[1, 2, 3, 4].map((slideNum) => (
<SwiperSlide key={slideNum}>
<img
src={`/images/banner/banner-${slideNum}-test.jpg`}
alt={`banner-${slideNum}`}
/>
</SwiperSlide>
))}
</Swiper>
);
};
export default SwiperHome;
NOTAS DEL DESARROLLADOR
-La función SwiperHome devuelve un componente que contiene un Swiper con cuatro SwiperSlide. Cada SwiperSlide contiene una imagen diferente que se muestra en el slider.
-El Swiper tiene varias opciones configurables, como spaceBetween , slidesPerView, navigation, y pagination. Estas opciones te permiten personalizar el slider según tus necesidades.
Si te gusto esta guía no dudes en compartirla o sugerir tu opinión. ❤️