Loading effect…
Loading preview…
cards · react · free
Swiper cards-effect testimonials with prev/next controls and stacked rotate.
.testimonial-cards {
display: grid;
width: 100%;
max-width: 48rem;
grid-template-columns: 1fr auto auto 1fr;
align-items: center;
row-gap: 1rem;
column-gap: 0;
}
.testimonial-cards__swiper {
grid-column: 1 / -1;
grid-row: 1;
width: 100%;
max-width: 36rem;
justify-self: center;
overflow: visible !important;
padding-inline: 0.25rem;
}
Stacked testimonial cards using Swiper’s cards effect, with prev/next controls.
npm i swipersrc/ into your React projectimport { TestimonialCards } from "./TestimonialCards";
const items = [
{
quote: "Shipped fast without sacrificing quality.",
name: "Alex Rivera",
role: "Founder",
company: "Northline",
rating: 5,
},
];
export function Example() {
return <TestimonialCards items={items} loop />;
}Use TestimonialCard alone when you only need a single card.
"use client")swiper (EffectCards)