Jeremiah Svaren Profile Picture
Book Your FREE 20 Minute Consult!
Get actionable web design & SEO advice from Jeremiah Svaren to help grow your business.

How to add testimonial slider to Squarespace website

by Jeremiah Svaren | Last Updated: May 24, 2021 •  2 min read

Building a text slider with Flickity

 Check out Flickity and all that it has to offer! This is a great little library of CSS and Javascript that will make a smooth carousel-style slider for your testimonials or reviews. You can add this to any Squarespace website, though I have only tried it with version 7.1 and you should do this at your own risk!

How to add testimonial slider to Squarespace website | Using flickity carousel

CODE SNIPPETS

First add this to your header tag

Get to your header code in Settings -> Advanced -> Code Injection

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Here is the HTML that I used to create this testimonial slider:

Use a code block set to HTML and customize the text nested in <p>here</p>

<div class="carousel" data-flickity='{ "wrapAround": true }'>
     <div class="carousel-cell"><p>This is the text you want to change out,  consectetur adipiscing elit. Cras in enim sed purus ullamcorper  pellentesque. Interdum et malesuada fames ac ante ipsum primis in  faucibus. - Jon Smith</p></div>
     <div class="carousel-cell"><p>Donec diam ante, vestibulum  eu mattis vitae, volutpat faucibus leo. Nunc tincidunt placerat semper.  Donec vehicula vel magna vitae lacinia. - Jane Doe</p></div>
    <div  class="carousel-cell"><p>Maecenas ultrices non tellus nec  pharetra. Maecenas vulputate lobortis nibh, quis vestibulum metus  vestibulum. - Mary Jane</p></div>
</div>
Outgrowing Squarespace?
Graduate Squarespace Course

Take your website to the next level! Take the step today to move your website to a future proof platform that is built for speed & scale.

Here is the CSS that I used to style this testimonial slider:

.carousel-cell {
 width: 80%;
 height: 200px;
 text-align: center;
 margin-right: 30px;
}
/* position outside */
.flickity-prev-next-button.previous {
 left: -30px;
}
.flickity-prev-next-button.next {
 right: -30px;
}
.flickity-button {
 background: transparent;
}

Check out the video for a more in-depth visual!

Get Your Free 20-Minute Consult!
Jeremiah Svaren Profile Picture
Book your free 20 minute consult with Jeremiah to discuss how to get more out of your website!
Jeremiah Svaren wears just about all the hats at Svaren Web Studio. He started getting into web design and development back in 2013. First starting to learn on his own with books and tutorials, then in 2014 he attended The Tech Academy in Portland, Oregon. He learned all about software engineering and decided to start freelancing. Now when he isn't helping clients, he makes helpful content here and on his YouTube channel Svaren.
Square Online Certified Badge
Squarespace Circle Member Badge