Adding a carousel to your Squarespace site is a great way to showcase multiple images or products in one space. Carousels are easy to set up and can be customized to match your site’s design. In this article, we’ll show you how to add a carousel to your Squarespace site.
There is one way to add a carousel to your Squarespace site. That is to use the Carousel Block. Here are the steps that you can follow to add one:
1. Log in to your Squarespace account, then select the page where you would like to insert images and click on the “Edit” button.
2. Click the “Add Section” sign on the area where you want to add the block.
3. In the pop-up window of the section, scroll down on the left menu and click on “Images“, then select the carousel type from the list of blocks.
4. Once done, click on the “Edit Gallery” button located at the right portion of the section.
5. In the pop-up window, select the images you want to include in the carousel by clicking the “+” button. You can also add captions for each image by placing your text in the “Description” section.
6. Browse for the images that you want to add, then click on “Open.”
7. Once you’ve uploaded all of the images you want, click “Close.”
8. The next step is to click on the “Edit Section” button.
1. Carousels can be hard to navigate. If your carousel has more than a few items in it, your visitors may have a hard time finding the piece of content they’re looking for.
2. Carousels can slow down your site. Because they load multiple pieces of content at once, carousels can add significant weight to your pages and make them load more slowly.
3. Carousels can be distracting. The rotating nature of carousels can be very distracting for visitors and may cause them to miss important information on your page.
If you do decide to add a carousel to your Squarespace site, be sure to keep these points
9. In the pop-up window, make sure to select “Slideshow: Reel” for the Gallery Type.
10. Click on the “Done” button in the upper-left corner to save your changes.
11. To adjust the settings for your carousel, click the gear icon beside its page location.
12. In the Page Settings window, go to the “Advanced” tab.
13. Paste the code below in order to automate the scrolling of your images in the gallery section. When you’re finished making changes, click “Save.”
<script src=”https://code.jquery.com/jquery-3.5.1.js”></script>
<script>
$(function(){
/*1*/
let instance = 1;
/* instance of a gallery section on the page.
1 = the first gallery section on a page,
2 = the second gallery section on a page*/
let direction = 2;
/* 1 = backwards,
2 = forwards*/
window.setInterval(function(){
if ( $(“body:not(.sqs-edit-mode-active, .sqs-edit-mode) .gallery-reel”).length > 0 ) {
$(‘html:not(.sqs-modal-lightbox-open) .gallery-section’)[(instance – 1)].querySelector(‘.gallery-reel-control:nth-of-type(‘ + direction + ‘) .gallery-reel-control-btn’).click()
}
}, 2000);
});
</script>
14. The changes made won’t be seen in the Editor mode. For this, you need to enter the Full-screen mode, and to do that, go to the upper-right section of your page and click the arrow icon.
15. Now you can see your image carousel in action!
To learn more about adding a carousel to your Squarespace site, check out our help center article.
