Custom Cursor Slideshow Arrows

Code Toolkit
Written By Squarestylist Support

What You'll Create

A sophisticated custom cursor system in Squarespace that replaces default slideshow arrows. When hovering over the slideshow navigation zones, a 102×102px custom arrow cursor appears and follows mouse movement, rotating 180 degrees when switching between previous/next navigation.

The Problem It Solves

Squarespace's default slideshow arrows are functional but generic. This technique creates an immersive, interactive experience where the entire left/right halves of the slideshow become clickable navigation zones with a custom cursor indicator.

Perfect For

Creative portfolios, fashion lookbooks, photography galleries, interactive showcases, editorial slideshows.

What Makes This Different

Creates a custom cursor element that appears above all other content and follows mouse movement without blocking interactions. Arrow buttons expand to 50% width to create large clickable zones. JavaScript detects when visitors hover over navigation areas and tracks precise cursor position. The cursor rotates 180 degrees when moving from right to left navigation.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS + JavaScript

  • Prerequisites: Banner Slideshow List Section. CSS in Header Code Injection, JavaScript in Footer Code Injection.

  • Toolkit Title: Custom Banner Slideshow List section arrows

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Full-Width Logo Header
Next

Product and Blog Subtitles