K.B. Drop-In Background Slideshow

Outline:
This script provides a silky smooth background slideshow for Squarespace 7.1 sections.

Paste this script into a Code Block inside the section where you want the slideshow to appear. (It will auto-select the section - NO funny business with targetting your section ID.) Configure the options as per your needs.

Use & Settings:
Edit the upper part of the script to add your image URLs, no matter where they live on the internet - Squarespace CDN URLs included. Below, is an excerpt from the script which shows you the configurable options/constants. Add as many images as you like, control the overlay opacity, timing, zoom, image focal point, slide duration, and transition duration. Video demo below.

Limitations:

• The slideshow lazy-loads the images as it runs, so technically there’s no limit on how many images you could use - it would depend on the user’s machine memory/browser limitations. I’d suggest no more than 8 slides for reliable performance.

• You may also run more than one slideshow concurrently on the same page - they won’t interrupt each other as the script targets the specific section its in without bothering the other sections of your page.

• Fully responsive for mobile (with focus point for the image)

Compatibility & Limitations:

• Squarespace 7.1

• Designed for Pages (NOT: blog posts or products)

Live Demo: https://matriarx.com (last section)