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!
Subscribe to our YouTube Channel
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>
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!

See Related
Speed Up Your Squarespace Site in 5 Easy Steps
In 5 easy steps, get your Squarespace site loading as fast as possible. While some of these steps require a little bit more time then others, anyone speed things up!
How To Use SVG Icons In Squarespace
Looking to add some fancy SVG icons to Squarespace? We’ll cover every way that SVG’s can be used on your Squarespace site, without sacrificing page speed!
Squarespace VS Square Online (VERY DIFFERENT SERVICES)
While they seem like they fit in the same box of website builders, Square Online and Squarespace are two VERY different E-Commerce platforms.
Create & Add Custom Favicon to Squarespace 7.0 & 7.1
This simple little icon will immediately make your Squarespace website stand out! Get rid of that gray cube icon with a branded tab icon!
How to Add Category Descriptions to WordPress Blogs
Boost your SEO with category descriptions within the WordPress dashboard. Some themes will show these descriptions on the category page.
How To Setup Online Ordering With Square Online
Follow along with our free step-by-step video tutorial and start accepting orders online today!