How to create custom Oval Carousel in Squarespace

Pro Tips Other Tips
1

To create a custom Oval Carousel like this

(desktop)

image
image700×260 31.6 KB

(mobile)

image
image589×555 57.9 KB

Demo: https://tuanphan-demo.squarespace.com/0226c20v9ovalcarousel?noredirect

Pass: abc

#1.1. First, you need to add a Gallery Block

image
image451×700 77 KB

#1.2. You need to choose Stacked + enable Show Title and Description

image
image700×534 62.7 KB

#1.3. Add your desired oval images

image
image474×700 43.8 KB

#1.4. Hover on each image > Click Gear icon to add title/description text/URL

image
image503×700 72.5 KB

Add your desired title/description/url

image
image693×700 37.2 KB

#1.5. Hover on top right of section > Click Edit Section

image
image618×478 27.1 KB

Next, at Anchor Link, enter word: oval-carousel

oval-carousel

image
image451×700 70.6 KB

if you have multiple gallery block on page, just use oval-carousel01, oval-carousel02…

#1.6. Hover on Page where you added Gallery Block > Click Gear icon

image
image512×498 69.3 KB

Click Advanced > Paste this code

<!-- 02.26c20v9 Oval Carousel -->
<style>
  .bh-gallery-swiper-wrap {
    --bh-btn-bg: #fff;
    --bh-btn-color: #111;
    --bh-overlay-padding: 20px 16px 18px;
    --bh-title-size: 40px;
    --bh-desc-size: 20px;
    --bh-btn-size: 0.78rem;
    --bh-title-size-mobile: 20px;
    --bh-desc-size-mobile: 14px;
    --bh-btn-size-mobile: 12px;
    --bh-btn-padding-mobile: 5px 10px;
  }
</style>
<script>
  const bhGalleryConfig = {
    slidesPerViewDesktop: 3,
    slidesPerViewMobile: 1.95,
    centeredSlidesMobile: true,
    spaceBetweenDesktop: 70,
    spaceBetweenMobile: 10,
    autoplay: false,
    autoplayDelay: 3500,
    loop: true,
    buttonText: 'Buy Now'
  };
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="https://code.beaverhero.com/galleryblock/0226c20v9ovalcarousel.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.beaverhero.com/galleryblock/0226c20v9ovalcarousel.js"></script>

image
image700×544 40.2 KB

#2. Customize

#2.1. To change number of images on desktop/mobile, adjust these lines (Line 18, 19)

slidesPerViewDesktop: 3,
slidesPerViewMobile: 1.95,

#2.2. To adjust gap between images on desktop, mobile, adjust these lines (Line 21, 22)

spaceBetweenDesktop: 70,
spaceBetweenMobile: 10,

#2.3. To change button text, adjust Line 26

buttonText: 'Buy Now'

#2.4. To change title/description/button text size, adjust lines (Line 07 to Line 12)

--bh-title-size: 40px;
--bh-desc-size: 20px;
--bh-btn-size: 0.78rem;
--bh-title-size-mobile: 20px;
--bh-desc-size-mobile: 14px;
--bh-btn-size-mobile: 12px;

#2.5. To change button text, color, use this to Custom CSS

#siteWrapper span.bh-slide-btn {
    color: #f1f;
    background-color: green;
}

#2.6. To change title, description color, use this to Custom CSS

/* title */
#siteWrapper .meta-description * {
    color: violet;
}
/* description */
#siteWrapper .meta-title {
    color: #f00;
}

image
image700×199 37.6 KB

#2.7. If you see Gallery Block Stacked appears, then disappear, and space changed, use this to Custom CSS

section[id*="oval-carousel"] .gallery-block {
  display: none;
}