K.B. Drop-In Background Slideshow

$45.00

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)

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)

// === CUSTOMIZE THESE FOR THIS INSTANCE ===

const imgs = [

  "https://images.squarespace-cdn.com/content/67e3757d826ade3dd85b3fd9/5eeb8ddb-24e1-4117-a7c6-79c6fec4038b/AEISHA+STREET+CROSSING+SMILE+-+WIDESCREEN+3.5K.jpg",

  "https://images.squarespace-cdn.com/content/67e3757d826ade3dd85b3fd9/c9d57aad-58c2-4b4c-a38f-f09035cfb558/AIESHA+MIRROR+DREAM+ACTIVATED+2.4K.jpg",

  "https://images.squarespace-cdn.com/content/67e3757d826ade3dd85b3fd9/30d681ef-6fa2-4fce-bed8-5525cc033c67/GLENORA+V3+AND+FUJI+REVELATION.jpg"

];

const time = 5200;          // slide duration in ms

const fade = 1800;          // fade transition in ms

const zoom = 1.07;          // ken burns zoom level

const focalX = "35%";       // horizontal focal point

const focalY = "40%";       // vertical focal point

const overlayOpacity = 0.4; // 0 = no darkening (full brightness), 1 = completely black. Try 0.3–0.6 for nice contrast.

// ========================================