Testimonial slider

A Carrd demo slider for customer testimonials.



Customer testimonials


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.

Double testimonial slider

A Carrd demo for a double slider for customer testimonials.


Tutorial on how to update the code to have 2 sliders here.

Made by @jasonleowsg using Bootstrap.

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:<!-- 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 #:<!-- Indicators-->
<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">
<span class="fa fa-angle-left icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next control" data-target="#carouselExampleIndicators" role="button" data-slide="next">
<span class="fa fa-angle-right icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</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">
<span class="fa fa-angle-left icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next control" data-target="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="fa fa-angle-right icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
6. Done! 👍