Testimonial slider

A Carrd demo slider for customer testimonials.

Customer testimonials

Jane Doe

Growth Hacker

This Carrd plugin just works. Exactly what I needed for my SaaS marketing page. Thank you!

John Hancock

Front End Developer

I wanted a testimonial slider for my Carrd website but didn't want to fuss around with the containers and settings to make one. This plug-and-play Carrd plugin allows me to just copy and paste, edit some text and I'm done.

Mary Appleseed

Entrepreneur

I know some basic HTML and CSS, and that's all I needed to customize this testimonial slider for my Carrd site. Love it!

See the plugin in action on real websites made by customers of this plugin:Personal CV
Jewelry product slider (on mobile)
Consulting services

📣 New Carrd plugin released: Mega nav bar

Made by @jasonleowsg using Bootstrap.

Cancel

double slider tutorial

1. Go to the Embed element containing the testimonial slider code, find the body tag and find this code:<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">2. Change the id to carouselExampleIndicators2:<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">3. Scroll down a bit and find this code for the indicators: <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol>4. Change the data-target to what you used for the id in step #2, while keeping the prefix #: <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators2" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li> </ol>5. Scroll down some more and find this code for the carousel controls:<a class="carousel-control-prev control" data-target="#carouselExampleIndicators" role="button" data-slide="prev"> Previous </a> <a class="carousel-control-next control" data-target="#carouselExampleIndicators" role="button" data-slide="next"> Next </a>6. Change the data-target to what you used for the id in step #2, while keeping the prefix #:<a class="carousel-control-prev control" data-target="#carouselExampleIndicators2" role="button" data-slide="prev"> Previous </a> <a class="carousel-control-next control" data-target="#carouselExampleIndicators2" role="button" data-slide="next"> Next </a>6. Done! 👍

Back