Squarespace Two Rows Carousel

[tuanphan]

Description

• two rows carousels, you can set carousel with image only or carousel with image, text, button
• view demo – password: abc

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

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

#1.3. at Design > Choose Carousel

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

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

#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

or this

or this

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

#1.8. Click Advanced > Paste this code

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

<!-- 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>

#2. Customize

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

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

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

Add this code into Markdown

<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>