Squarespace HELP
- Started
- Last post
- 3 Responses
- nylon
So am working on a site where each project will have a carousel of 15 amount of images.
At the bottom of said carousel there is < 1/15 > so you can click through the images. There is also a full screen icon and THEN there is a grid like icon.
When you click the grid icon, it shows you all 15 images at a glance and when you click on one of the images, it goes bigger.
My client has seen this:
https://www.mergearchitects.com/…
and wants to know if it is possible is Squarespace
My terminology is horrible here so please be nice...
What is it called and can Squarespace do this?
Thanks
- duckseason0
- Noticed this video is from 3 years ago. So assuming things have evolved a bitduckseason
- But I haven't touched SS in even longer, so.... ¯\_(ツ)_/¯duckseason
- ridg00261
The short answer is **yes**, but it requires a bit of a "choose your own adventure" approach depending on how much custom coding you want to do.
The code you shared uses **UIkit** (a front-end framework), which is quite different from Squarespace’s native architecture. To get that exact look—a slideshow with a custom counter, a thumbnail grid overlay, and specific navigation icons—you have three main paths:
---
## 1. The "Native-ish" Path (Easiest)
Squarespace has a built-in **Gallery Section** (specifically the "Gallery Slideshow: Full") that handles the basics: full-width images, arrows, and auto-play.* **Pros:** Fast, responsive, and easy to update.
* **Cons:** It won't have the "Grid/Thumbnail" icon or the specific "1 / 14" counter layout without custom CSS.
* **How:** Add a Gallery Section -> Choose Slideshow -> Full. You can then use **Custom CSS** to style the arrows and text overlays to match your reference.## 2. The Custom Code Block (Closest Match)
If you want the *exact* functionality of that UIkit slideshow, you can drop the code into a **Code Block**.* **Pros:** You get the exact UI and features (the modal grid, the specific transitions).
* **Cons:** Squarespace doesn't load UIkit by default. You would need to link the UIkit CSS and Javascript in your **Settings > Advanced > Code Injection**.
* **Crucial Step:** You’d need to ensure the `data-src` links in your code point to images already uploaded to your Squarespace library or an external host.## 3. Third-Party Plugins (The "Middle" Way)
There are creators in the Squarespace community (like *Squarewheel* or *Ghost Plugins*) who sell "Lightboxed Gallery" or "Advanced Slideshow" plugins.* **Pros:** Provides that professional "architectural portfolio" feel with features like thumbnail toggles and counters without you having to write the Javascript from scratch.
---
### Key Technical Hurdles to Watch For:
* **FontAwesome Icons:** Your code uses classes like `fa-sharp fa-solid fa-chevron-left`. For these to appear, you must install the FontAwesome kit in your site's `<head>`.
* **Asset Hosting:** In your snippet, the images are hosted on a WordPress site (`mergearchitects.com`). If you move to Squarespace, you should upload those images to Squarespace's Asset Library to avoid "hotlinking" issues or broken links if the old site goes down.
* **Z-Index:** Squarespace headers and footers can sometimes overlap custom code blocks. You’ll likely need a few lines of CSS to ensure your "fullscreen" or "modal" elements stay on top.**The Verdict:** If you love the UIkit aesthetic (which is very clean and popular for architects), I’d recommend using a **Code Block** and injecting the UIkit library. It's the only way to get that specific "Grid View" toggle inside the slideshow.
Does that help narrow down your strategy, or were you hoping to avoid using custom code?
- HAYZ1LLLA0
Something like this?