A carousel is a set of scrolling images, usually three or more. To create a carousel in Squarespace, follow these steps:
1. Log in to your Squarespace account. On the Home Page’s Main Navigation menu, go to the page where you want to add the slideshow, then click on the “Edit” button.
2. Add a new section. To do this, click on the “Add Section” button in the area where you want to add the block.
3. Add a carousel type of image block. 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. Edit the gallery of images. To do this, click on the “Edit Gallery” button located at the right portion of the section.
5. Upload images to the gallery. In the pop-up window, select the images you want to include in the carousel by clicking the “+” button.
6. Browse for the images. Open the file location that contains the images that you want to add, select them and then click on “Open.”
7. Close the gallery window. Once you’ve uploaded all of the images you want, click “Close.”
8. Edit the section added. Go to the section you recently added and click on the “Edit Section” button.
9. Set up the section’s gallery type. In the pop-up window, make sure to select “Slideshow: Reel” for the Gallery Type.
Firstly, when creating a carousel of images, make sure that the images are all of an appropriate size and resolution. If they are not, then they may not display correctly on the carousel or may take longer to load.
Secondly, be careful when adding and removing images from the carousel. If you add or remove too many images at once, it can cause the carousel to malfunction.
Finally, make sure to preview the carousel before publishing it. This will allow you to catch any errors and ensure that everything looks as it should.
10. Save changes to the section. Click on the “Done” button in the upper-left corner to save your changes.
11. Set up carousel settings. To adjust the settings for your carousel, click the gear icon beside its page location.
12. Open the advanced settings of the page. In the Page Settings window, go to the Advanced tab.
13. Automate the scrolling of the image carousel. Paste the code below to automate the scrolling of your images in the gallery section creating a slideshow. 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. Enter full-screen mode to preview changes. 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 have your automatically scrolling image carousel in action!
Adding a carousel to your Squarespace site is a great way to showcase multiple images on a single page or post. With just a few clicks you can add captions and links to your images for more control over how they are displayed.
If you need help adding a carousel or have any questions about using this feature, our team is here 24/7 via live chat and email!
