How to add testimonial slider to Squarespace website

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

Tutorials » Squarespace

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!

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/[email protected]/dist/flickity.min.css">
<script src="https://unpkg.com/[email protected]/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>

Have You Outgrown Squarespace?

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.

Learn More

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!

Get a free 20 minute call with Jeremiah to discuss how to get more out of your website!

Let's Talk!

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.