# Squarespace Static image to Fade in Carousel

**URL:** <https://community.elfsight.com/t/squarespace-static-image-to-fade-in-carousel/169692>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 30, 2026, 2:53am UTC](https://community.elfsight.com/t/squarespace-static-image-to-fade-in-carousel/169692 "2026-07-30T02:53:23Z")\
**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 30, 2026, 2:53am UTC](https://community.elfsight.com/t/squarespace-static-image-to-fade-in-carousel/169692/1 "2026-07-30T02:53:23Z")

</div>

**Description**

- change static section background image to fade in carousel, you can add text/button or anything over carousel
- [view demo](https://tuanphan-demo.squarespace.com/0726c24v7-static-image-to-fade-in-carousel?noredirect) – password: abc

**#1.1.** First, you can add a Section with your desired text, buttons…and some Image Blocks (code will get Image URL from these Image Blocks into Carousel)

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

**#1.2.** Make sure you added Section Background Image

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

**#1.3.** Hover on top right of section \> Click EDIT SECTION \> at Design \> Anchor Link \> enter word: fade-carousel

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/b/ebd0ae981524aae79bd1eb1dc35538c53c40af68.png)

**#1.4.** Hover on Page where you use Section \> Click Gear icon

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

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

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

```auto
<!-- 07.26c24v7 Static image to Fade in Carousel -->
<script>
window.SectionFadeCarouselConfig = {
  sections: [
    {
      selector: '#fade-carousel',
      imageBlockSelector: '.sqs-block-image',
      hideImageBlocks: true,
      useBlockFocalPoint: true,
      includeSectionImage: true,
      sectionImagePosition: 'first',
      useSectionFocalPoint: true,
      imageWidth: 2500,
      intervalMs: 3000,
      fadeMs: 1200,
      focalPoint: 'center center',
      overlayColor: 'rgba(0, 0, 0, 0.32)',
      showArrows: true,
      arrowColor: '#ffffff',
      arrowBackground: 'rgba(0, 0, 0, 0.28)',
      arrowSize: 34,
      arrowInset: '1vw',
      prevLabel: 'Previous image',
      nextLabel: 'Next image',
      pauseOnHover: true
    }
  ]
};
</script>
<script src="https://code.beaverhero.com/other/0726c24v7staticimgtocarousel.js"></script>

```

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

**#2. Customize**

**#2.1.** To change overlay color, change Line 17

```auto
overlayColor: 'rgba(0, 0, 0, 0.32)',

```

**#2.2.** To change arrow style, change line 20 to line 22

```auto
arrowBackground: 'rgba(0, 0, 0, 0.28)',
     arrowSize: 34,
     arrowInset: '1vw',

```

**#3.1.** If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Current Page \> Add a Markdown Block.

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

Then use this code into Markdown Block

```auto
<script>
window.SectionFadeCarouselConfig = {
  sections: [
    {
      selector: '#fade-carousel',
      imageBlockSelector: '.sqs-block-image',
      hideImageBlocks: true,
      useBlockFocalPoint: true,
      includeSectionImage: true,
      sectionImagePosition: 'first',
      useSectionFocalPoint: true,
      imageWidth: 2500,
      intervalMs: 3000,
      fadeMs: 1200,
      focalPoint: 'center center',
      overlayColor: 'rgba(0, 0, 0, 0.32)',
      showArrows: true,
      arrowColor: '#ffffff',
      arrowBackground: 'rgba(0, 0, 0, 0.28)',
      arrowSize: 34,
      arrowInset: '1vw',
      prevLabel: 'Previous image',
      nextLabel: 'Next image',
      pauseOnHover: true
    }
  ]
};
</script>
<script src="https://code.beaverhero.com/other/0726c24v7staticimgtocarousel.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/7/2724cada67f3c1ae95661ccc5b9e17bad79ca841.png)