Slideshow with Text and Buttons | Squarespace 7.1

What does this code do?

This code snippet will allow you to have a full width slideshow with text and buttons.

Note: This is only available for Squarespace 7.1 as there are no Gallery Sections in Squarespace 7.0.

View fullsize

Video Tutorial

Set Up Your Slideshow

The first thing you need to do is set up the slideshow. Click to add a new section and choose a Slideshow Gallery Section (you can find this under the Images category). Click the pencil icon to edit the section and make sure to you have Slideshow Full with captions turned on. You can choose whichever arrows you like and turn on Autoplay.

Then click the image icon to add in the images you would like in the slideshow. Copy and paste the following code into the description of each image and customize the text. Then set the image link.

<h2>This is a title.</h2>
<p>This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description.</p>
<a href = "/shop">See Our Shop</a>

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Slideshow Gallery with Text and Buttons */
.gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
  margin-bottom: 0;
}

.gallery-caption-fullscreen-slideshow {
  position: absolute;
  top: 0;
  margin: 0;
  max-width: unset;
  width: 100%;
  height: 100%;
}

.gallery-caption-fullscreen-slideshow .gallery-caption-wrapper {
  background: hsla(0,0,0,0.2); /* background overlay */
  padding: 0 2vw;
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal alignment */
  justify-content: center; /*vertical alignment */
  text-align: center; /* text alignment */
}

.gallery-caption-fullscreen-slideshow .gallery-caption-wrapper h2 {
  color: white; /*color of title */
  font-size: 3.5rem ; /*  font size of title*/
  width: 60%; /* width of title content */
}
.gallery-caption-fullscreen-slideshow .gallery-caption-wrapper p {
  color: white; /*color of description */
  font-size: 1.4rem ; /*  font size of description */
  width: 60%; /* width of description content */
}
.gallery-caption-fullscreen-slideshow .gallery-caption-wrapper a {
  color: black; /* color of button text */
  font-size: 1rem ; /* font size of button text */
  background: white; /* background button color */
  margin-top: 2vw; /* space between description and button */
  padding: 1vw 2vw; /* spacing inside button */
  border-radius: 10px; /* rounded corners on button */
}

Bonus: If your slideshow is the first section on a page…

If your slideshow is the first section on the page and you would like the header to appear overtop the slideshow, make sure you have your header set to transparent and copy and paste the following code into Design > Custom CSS.

/* Have Slideshow Under Header */
#COLLECTIONID #page .page-section:nth-of-type(1) {
  padding-top: 0 !important;
}

Then change out the collection id to the id of the page the slideshow is on.

How To Use It

1. Set up your slideshow with your text and buttons in the image description. Make sure you have captions turned on!

2. Copy and paste the code as indicated above.

3. Customize the colors, font size, and spacing.