Custom arrows for Summary Block Carousels in Squarespace

You know ‘em, you love ‘em, but you’re probably not that fond of their arrows.

Summary Block Carousels are great to use on client projects… but their default navigation arrows don’t always match the visual direction of the design.

In this tutorial, we’ll walk through how to replace the default chevron Summary Carousel arrows for custom image-based ones, using only a small amount of CSS (I used ones from Reshot in case you liked them).

Along the way, I’ll also show you some helpful tips to keep in mind when you’re facing a style-replacement situation vs. simply adding a new thing the element doesn’t have.

Overall, you’ll get a better understanding of how Squarespace builds these arrows in the backend, which will make this customization easy to adapt, resize, or extend later on.

Oh, and if you’re also interested in moving the arrows below the content or to the sides of the carousel, make sure to check out this plugin and this other one inside The Snippet Directory.

Let’s go!

Tutorial

Overview & timestamps

1. 00:00 - Intro & customization overview
   This customization will only require some CSS and your pre-uploaded custom arrow files inside the Custom Files section of the site. So once you have those in place, you’ll be able to follow along.

2. 01:00 - Inspecting the default carousel arrows
   We’ll begin looking through the Inspector Tool to check out how Squarespace builds its carousel arrows natively. Based on what we find, we’ll decide which method to use to substitute the original icons. Spoiler: if you’re planning on replacing the chevrons with a different unicode character, you’ll pretty much be set just with this step!

3. 03:00 - Choosing the replacement strategy
   Now that we know what’s what, we’ll decide where we want to set up our background image (since we'll have more than one container to choose from) and how to hide the existing arrow.

4. 05:45 - Implementing the custom arrow images
   Next, it’s time to pick our selectors. Since we’ll be adding the image to a container that doesn’t currently have a background-image property, we’ll be able to use any class we want in our code. However, we’ll see that when it comes to hiding the original icon, taking a similar “simple” route won’t be enough. I’ll walk you through the difference and what to do in those situations. You’ll be able to apply the same logic anywhere else when customizing projects!

5. 08:40 - Fixing the size & final result
   Finally, with our two new arrows in place, we’ll address the sizing issue caused by the parent controls container, override the fixed width, and manually set dimensions so the custom arrows display correctly. Once that’s done, you’ll have your custom carousel ready to go!

Not bad, right?

You can continue tweaking the span container we used and add a background color or border if you want, or just mark the modification as done and go about your day!

In any case, I hope you found this helpful.

Until next time,

B.

---

Full code

Custom CSS Window

/*CUSTOM ARROWS FOR SUMMARY BLOCK CAROUSEL*/
//Previous arrow
.summary-carousel-pager-prev {
  background-image: url(LEFT.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
  width: 50px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  display: none;
}

//Next arrow
.summary-carousel-pager-next {
  background-image: url(RIGHT.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
  width: 50px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  display: none;
}

//Controls container
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
  width: auto;
}