Yes, you can create a slideshow on Squarespace. To do so, you’ll need to use the Carousel Block. This block allows you to add multiple images, and then set those images to rotate automatically.
To add a Carousel Block in Squarespace, follow the steps below:
1. Log in to your Squarespace account and go to the page where you want to add the slideshow, then click on the “Edit” button.
2. Click the “Add Section” button 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 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.
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 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. 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 images in action!
