Cómo crear Slider de Cards con testimonios en JavaScript y Next.js

En este tutorial, aprenderemos a crear un slider de cards con testimonios utilizando JavaScript y Next.js.

Paso 1: Configuración del entorno

Lo primero que debemos hacer es crear un nuevo proyecto de Next.js. Para ello, abriremos una terminal y ejecutaremos el siguiente comando:

      npx create-next-app my-slider-app
      cd my-slider-app
    

Paso 2: Creación de componentes

A continuación, crearemos un componente de tarjeta para representar los testimonios. En el directorio de nuestro proyecto, crearemos un nuevo archivo llamado TestimonialCard.js con el siguiente contenido:

      import React from 'react';

      const TestimonialCard = ({ testimonial }) => {
        return (
          

            
{testimonial.name}
            
{testimonial.content}
          
        );
      };

      export default TestimonialCard;
    

Paso 3: Implementación del slider

Para implementar el slider, utilizaremos la librería react-slick, que nos proporciona una interfaz sencilla para crear sliders. Primero, instalaremos la librería ejecutando el siguiente comando en nuestra terminal:

      npm install react-slick slick-carousel
    

A continuación, modificaremos nuestro componente principal para incluir el slider y las tarjetas de testimonios. Crearemos un archivo llamado TestimonialsSlider.js con el siguiente contenido:

      import React from 'react';
      import Slider from 'react-slick';
      import TestimonialCard from './TestimonialCard';

      const testimonialData = [
        { name: 'John Doe', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { name: 'Jane Smith', content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
        { name: 'Michael Johnson', content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
      ];

      const TestimonialsSlider = () => {
        const settings = {
          dots: true,
          infinite: true,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1
        };

        return (
          
            {testimonialData.map((testimonial, index) => (
              
            ))}
          
        );
      };

      export default TestimonialsSlider;
    

Paso 4: Integración con Next.js

Finalmente, integraremos nuestro slider de testimonios en una página de nuestro proyecto de Next.js. En el archivo pages/index.js, incluiremos nuestro componente TestimonialsSlider:

      import TestimonialsSlider from '../components/TestimonialsSlider';

      const Home = () => {
        return (
          

            
Welcome to my website!
            
          
        );
      };

      export default Home;
    

Una vez hayamos completado estos pasos, habremos creado un slider de cards con testimonios utilizando JavaScript y Next.js. ¡Esperamos que este tutorial haya sido útil!