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/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>
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
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 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 WordPress: The Ultimate Showdown
Trying to decide between Squarespace and WordPress for your website? We'll go in-depth in this article with client examples so that you can decide once and for all the website platform to move forward with!
How To Duplicate a Page on Squarespace
Quickly and easily duplicate pages and posts in Squarespace. Don't forget the small SEO details that are easy to miss when cloning a page.
Top 3 SEO Strategies
Everything you need to know about search engine optimization can be boiled down to these 3 strategies. Bonus 4th strategy is included!
How To Setup Online Ordering With Square Online
Follow along with our free step-by-step video tutorial and start accepting orders online today!