The Ultimate Guide to Carousels in Squarespace
Carousels on a website allow you to display text and images in a single line or sliding block. They are a great design option for showing a group of related content such as blogs, galleries, testimonials, and logos.
If you are designing in Squarespace, there are two different ways to add a carousel and which one you use depends on the content you want to display.
In this post, we're going to talk all about carousels in Squarespace including how to add them, how to get them to auto scroll or auto play, and how to use a carousel to display testimonials.
How do I add a carousel in Squarespace?
There are two different ways to add carousels in Squarespace. Which one you use will depend on the content you want to display. If you want to display a series of images, you can use a Gallery Section. If you want to display a collection of items such as your blog posts or products, you will use a Summary Block.
To add a Gallery Section, click to edit the page you want the carousel on. Then click “add section” and choose one of the galleries under the images category. Click to “Edit Gallery” and add all of the images that you would like to have in the carousel. You can also add a description and a click through link. Then under “Edit Section” choose “Slideshow: Reel”. There are a bunch of styling options such as the size, where the arrows are displayed, cropping, and captions. Finally, in the “Colors” tab, you can then choose the color theme that you would like to be in the background.
To add a Summary Block, click to edit the page you want the carousel on. Click to add a block and choose a Summary Block. Resize the blog how you would like and then click on the pencil icon. In the editing box, select the collection you want to use the carousel for and the meta date you want displayed. Under the design tab, choose “Carousel”, the total of number of items you want in the carousel and how many items you want displayed at a time. Similar to the Gallery Section, there are a bunch of styling options such as the aspect ratio of the image, the size of the text, the header text, and what elements you want to display.
How do I get the carousel to auto play or auto scroll?
Once you have added your carousel, your next mission may be to get your carousel to auto play or auto scroll. In the Squarespace editor, there is no way to turn on auto scroll for either the summary block or the gallery real section. So, you have to use the following code.
If you are using a Summary Block, go to Settings > Advanced > Code Injection and copy and paste the following code into the Footer.
<!-- REBECCA GRACE DESIGNS -->
<!-- Summary Block Autoplay -->
<script>
(function() {
var nextArrowSummary = document.querySelector(".summary-carousel-pager-next");
function clickNextSummary() {
nextArrowSummary.click();
}
setInterval(clickNextSummary, 3000);
})();
</script>This code automatically clicks on the Summary Blocks’s next arrow every three seconds. You can adjust speed by adjusting the 3000 up or down. Once it gets to the end, Squarespace waits a moment and then sends the Summary Block back to the beginning.
There is a very similar process for the Gallery Section. If you are using a Gallery Section, go to Settings > Advanced > Code Injection and copy and paste the following code into the Footer.
<!-- REBECCA GRACE DESIGNS -->
<!-- Gallery Reel Section Autoplay -->
<script>
(function() {
var nextArrowGallery = document.querySelector('.gallery-reel-control-btn[data-test="gallery-reel-control-btn-next"]');
function clickNextGallery() {
nextArrowGallery.click();
}
setInterval(clickNextGallery, 3000);
})();
</script>This code automatically clicks on the Gallery Section’s next arrow every three seconds. Again, you can adjust speed by adjusting the 3000 up or down. Once it gets to the end, Squarespace waits a moment and then resets the Gallery Section back to the beginning.
Warning: These codes do not work well when used together on the same page. Squarespace doesn't like that they are clicking at the same time and it continually opens the editor. If you have both on your site, I suggest putting the code in the Pages Code Injection instead.
There are more customizations you can do with this code including using it on multiple summary blocks on the same page. As is, the code will only select the very first summary block (or gallery section), not multiple. You can also turn it off on mobile, and more. These code snippets are included inside of the Encyclopedia of Code. Click here to learn more.
How can I use carousels to display my testimonials?
Your first option is to use a Gallery Section by creating a graphic of a person's image and their testimonial. The main drawback to this option is it’s appearance on mobile. Depending on how long their testimonial is, it may not size well. Additionally, if you have the testimonials on multiple pages, you have to update each gallery section when you want to add or change the testimonials.
Another option is to use a Summary Block. Because a Summary Block uses a collection page, we first need to design a collection for our testimonials. In your Not Linked Section, add a Blog page. In the Page Settings, go to SEO and turn off “All Pages in This Collection” because we don't want this blog to be index for Google. Then add a post for each testimonial. Use the post thumbnail for an image and the blog excerpt for the testimonial. Then go to the page you want to add the testimonial carousel to and add a Summary Block. Choose your Testimonial Blog, set the primary data to “none”. Then under the design tab, choose your items per row and only display the image and excerpt. You can then resize the block to your liking.
There are lots of ways you can then style this further using CSS. The first thing you may want to do is to disable the option to click. If don’t want your users to be able to find the blog page and post themselves, then copy and paste the following code into Design > Custom CSS.
/* REBECCA GRACE DESIGNS */
/* Summary Testimonial */
.summary-thumbnail-outer-container a{
pointer-events: none !important; /*turns off the ability to click on the image */
cursor: default !important;
}You may also want to style the excerpt such as making it bigger and adding some space between the image and the text. Copy and paste the following code underneath the above code.
.summary-excerpt p {
padding-top: 2vw;
font-size: 1.1rem !important;
}There are a ton of customizations you can add to the image including making it bigger or smaller or changing it’s shape. These code snippets are included inside of the Encyclopedia of Code. Click here to learn more.
