Introduction

Testimonials are a powerful tool to showcase the credibility and value of your products or services. Imagine being able to present them dynamically in an interactive carousel that adapts to different screen sizes. In this tutorial, we'll walk you through the process of creating an impressive testimonial carousel using the react-multi-carousel library. Whether you're new to React or just looking to enhance your website's user experience, this step-by-step guide will get you up and running in no time.

Live example

Installation

The first step is to install the necessary dependencies. Open your terminal and execute either of the following commands based on your package manager preference:

npm install react-multi-carousel --save

or

yarn add react-multi-carousel --save

Setting Up index.js

Let's dive into the implementation. In your index.js file, import the TestimonList component and the testimonial data:

import TestimonList from "../components/TestimonList"; 
import records from "../data/testimonials.json" 

export default function Home( ) {
  return (
    <main>
      <TestimonList records={records} translate={translate}/>
    </main>
  );
}

Creating the TestimonList Component

In the TestimonList component, you'll create a responsive testimonial carousel using react-multi-carousel. We'll define the breakpoints and rendering options for different screen sizes:

import TestimonCard from "./TestimonCard";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

export interface Record {
  image: string;
  title: string;
  description: string;
  name: string;
}

interface Props {
  records: Record[];
}

const TestimonList = ({ records}: Props) => {

  const responsive = {
    // Define breakpoints and items to show at each breakpoint
    // Adjust these values based on your design and preferences
    superLargeDesktop: { breakpoint: { max: 4000, min: 3000 }, items: 4, slidesToSlide: 1 },
    desktop: { breakpoint: { max: 3000, min: 1024 }, items: 2, slidesToSlide: 1 },
    tablet: { breakpoint: { max: 1024, min: 464 }, items: 1, slidesToSlide: 1 },
    mobile: { breakpoint: { max: 464, min: 0 }, items: 1, slidesToSlide: 1 },
  };

  return (
    <div className="w-full bg-slate-100">
{/* Carousel title */}
      <h2 className="text-2xl sm:text-3xl font-medium text-center pb-2 pt-16">
        What our associates say about us
      </h2>
      <div className="max-w-[1140px] mx-auto px- sm:px-6 text-center mt-10">
{/* Carousel component */}
{/* The word itself says what each prop means, play with the values */}
        <Carousel
          ssr={true}
          className="z-[1]"
          centerMode={true}
          keyBoardControl={true}
          infinite={true}
          draggable={false}
          responsive={responsive}
          swipeable={false}
        >
{/* Mapping over records to render TestimonCard components */}
          {records.map((record, index) => (
            <TestimonCard
              key={index}
              title={record.title}
              image={record.image}
              description={record.description}
              name={record.name}
            />
          ))}
        </Carousel>
      </div>
    </div>
  );
};

export default TestimonList;

Testimonial Cards with TestimonCard Component

Each testimonial will be displayed as a card using the TestimonCard component. This component encapsulates the layout and structure of a single testimonial card:

import Image from "next/image"; 

const TestimonCard = ({ title, image, name, description }: any) => { 
  return (
    <div className="max-w-[400px] min-h-[296px] mb-10 border shadow-lg rounded bg-slate-50 mr-4">
      <div className="sm:ml-4 mt-[-5px] w-[150px]">
        <Image src={image} alt={title} width={250} height={180} />
      </div>
      <div className="mt-[-5px]">
      <div className="text-start font-medium ml-2 sm:ml-4 text-lg whitespace-nowrap overflow-hidden text-ellipsis">
        {title}
      </div> 
      <div className="text-start font-medium ml-2 sm:ml-4 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
        {name}
      </div> 
      <div className="pb-2 text-start mx-2 sm:mx-4 text-sm sm:text-base mb-2 font-semibold text-gray-600">
        {description}
      </div>
      </div>
    </div>
  );
};

export default TestimonCard;

Table of props

Here's a table listing the props you can use with the react-multi-carousel component based on the documentation:

Conclusion

By following this tutorial, you've successfully created a responsive testimonial carousel using react-multi-carousel. Testimonials are now elegantly displayed in an interactive format that adapts to various device sizes. As you continue to refine your web development skills, you can further customize and optimize the carousel's behavior and appearance to suit your project's unique requirements.

Remember, this tutorial provides a foundation that you can build upon. Feel free to experiment with the provided code and tweak the values to achieve the desired look and feel for your testimonial carousel.

Happy coding!