Building Interactive Testimonial Carousels/Swipers with react-multi-carousel

Building Interactive Testimonial Carousels/Swipers with react-multi-carousel

Step-by-Step guide/tutorial on how to make Swiper, with react-multi-carousel, including ready-to-use code snippets for Implementation in your project.


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


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


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 (
      <TestimonList records={records} translate={translate}/>

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
      <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 */}
{/* Mapping over records to render TestimonCard components */}
          {, index) => (

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 className="mt-[-5px]">
      <div className="text-start font-medium ml-2 sm:ml-4 text-lg whitespace-nowrap overflow-hidden text-ellipsis">
      <div className="text-start font-medium ml-2 sm:ml-4 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
      <div className="pb-2 text-start mx-2 sm:mx-4 text-sm sm:text-base mb-2 font-semibold text-gray-600">

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:

responsiveobject{}Numbers of slides to show at each breakpoint
deviceTypestring''Only pass this when use for server-side rendering, what to pass can be found in the example folder
ssrbooleanfalseUse in conjunction with responsive and deviceType prop
slidesToSlideNumber1How many slides to slide.
draggablebooleantrueOptionally disable/enable dragging on desktop
swipeablebooleantrueOptionally disable/enable swiping on mobile
arrowsbooleantrueHide/Show the default arrows
renderArrowsWhenDisabledbooleanfalseAllow for the arrows to have a disabled attribute instead of not showing them
removeArrowOnDeviceTypestring or array''Hide the default arrows at different break point, should be used with responsive props. Value could be mobile or ['mobile', 'tablet'], can be a string or array
customLeftArrowjsxnullReplace the default arrow with your own
customRightArrowjsxnullReplace the default arrow with your own
customDotjsxnullReplace the default dots with your own
customButtonGroupjsxnullFully customize your own control functionality if you don't want arrows or dots
infinitebooleanfalseEnables infinite scrolling in both directions. Carousel items are cloned in the DOM to achieve this.
minimumTouchDragnumber50The amount of distance to drag / swipe in order to move to the next slide.
afterChangefunctionnullA callback after sliding everytime.
beforeChangefunctionnullA callback before sliding everytime.
sliderClassstring'react-multi-carousel-track'CSS class for inner slider div, use this to style your own track list.
itemClassstring''CSS class for carousel item, use this to style your own Carousel item. For example add padding-left and padding-right
containerClassstring'react-multi-carousel-list'Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown.
dotListClassstring'react-multi-carousel-dot-list'Use this to style the dot list.
keyBoardControlbooleantrueUse keyboard to navigate to next/previous slide
autoPlaybooleanfalseAuto play
autoPlaySpeednumber3000The unit is ms
showDotsbooleanfalseHide the default dot list
renderDotsOutsidebooleanfalseShow dots outside of the container
customTransitionstringtransform 300ms ease-in-outConfigure your own anaimation when sliding
transitionDuration`number300The unit is ms, if you are using customTransition, make sure to put the duration here as this is needed for the resizing to work.
focusOnSelectbooleanfalseGo to slide on click and make the slide a current slide.
centerModebooleanfalseShows the next items and previous items partially.
additionalTransfromnumber0additional transfrom to the current one.
shouldResetAutoplaybooleantrueresets autoplay when clicking next, previous button and the dots
rewindbooleanfalseif infinite is not enabled and autoPlay explicitly is, this option rewinds the carousel when the end is reached (Lightweight infinite mode alternative without cloning).
rewindWithAnimationbooleanfalsewhen rewinding the carousel back to the beginning, this decides if the rewind process should be instant or with transition.
rtlbooleanfalseSets the carousel direction to be right to left


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!