# Squarespace Two Rows Carousel

**URL:** <https://community.elfsight.com/t/squarespace-two-rows-carousel/168131>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 15, 2026, 3:10am UTC](https://community.elfsight.com/t/squarespace-two-rows-carousel/168131 "2026-07-15T03:10:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 15, 2026, 3:10am UTC](https://community.elfsight.com/t/squarespace-two-rows-carousel/168131/1 "2026-07-15T03:10:12Z")

</div>

**Description**

- two rows carousels, you can set carousel with image only or carousel with image, text, button
- [view demo](https://tuanphan-demo.squarespace.com/0726c11v2-2-rows-carousel?noredirect) – password: abc

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/f/0fc1ed8bf266a6872d49e060dbac047089fddc02.jpeg)

**#1.1.** First add Section \> Choose Team \> Choose Section with (i) icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/c/8c1d195cc55cd43ac5b6024423d416b306d6a92d.jpeg)

**#1.2.** Hover on top right of section \> Click **EDIT CONTENT**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/0/8029e99fe5d5cca1b6ece6f2e715f17111faff5f.jpeg)

**#1.3.** at Design \> Choose Carousel

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/2/5292ad73180d4a3c62059aea8a9d7af90acdadf2.png)

**#1.4.** at Elements \> You can Enable Image or Image, Title, Button, anything what you want. But Image is required.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/9/4916da5f2852dd0279f494d7d9ec6dc616dc631d.png)

**#1.5.** at Content \> Add your desired title, image, button url

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/e/5e7d9465211a159ff538c76c571f747626e3ff1a.jpeg)

**#1.6.** Add word: row-1 or row-2 to Image ALT

This will determine whether the image will be in Row 1 or Row 2.

Like this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/b/fbd329c326c1db13c8fc1d93550841246fd19781.jpeg)

or this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/9/c9a9a58bb02bf5c50c51ed1eb954067dfc2d5892.jpeg)

or this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/f/ff4f7e84dd408b7a599e9cc5ba297873419a898c.jpeg)

**#1.7.** Hover on Page where you use Carousel \> Click Gear icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/3/93a9f7400b63a21c3daf1207cb4e554c7644998c.png)

**#1.8.** Click Advanced \> Paste this code

- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

```auto
<!-- 07.26c11v2 2 Rows Carousel -->
<script>
window.TWO_ROWS_CAROUSEL_CONFIG = {
  slidesPerViewTablet: 2,
  slidesPerViewMobile: 1,
  tabletBreakpoint: 640,
  desktopBreakpoint: 1024,
};
</script>
<script src="https://code.beaverhero.com/list/0726c11v2tworowscarousel.js"></script>
<style>.trc-1 {padding-left: 2vw;padding-right: 2vw;}</style>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/6/e6531542167126de4c5fe5e96b0377fea7cfed66.jpeg)

**#2. Customize**

**#2.1.** If you see space between arrow – first row/arrow – second row is not equal, you can change option to 0

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/8/08eaf9bfd721a9e0ded3e9484cf883f3d7c4bf3a.png)

**#2.2.** To change number of columns on desktop/mobile, you can change these lines (Line 04, Line 05)

```auto
slidesPerViewTablet: 2,
slidesPerViewMobile: 1,

```

**#3. Other**

**#3.1.** If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Carousel) \> Add a Block \> Choose Markdown

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/5/a5b7c63b8bf5d6bd492784a712cbb1709ce8e8e0.png)

Add this code into Markdown

```auto
<script>
window.TWO_ROWS_CAROUSEL_CONFIG = {
  slidesPerViewTablet: 2,
  slidesPerViewMobile: 1,
  tabletBreakpoint: 640,
  desktopBreakpoint: 1024,
};
</script>
<script src="https://code.beaverhero.com/list/0726c11v2tworowscarousel.js"></script>
<style>.trc-1 {padding-left: 2vw;padding-right: 2vw;}</style>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/8/6822843a4d9c8cc41242ad72337ebc9e3ed409f3.png)