The following code below can be used to configure a nicely transitioning slideshow as a page banner. This works in SquareSpace 7.1, I’m not sure if it can be adapted to work in 7.0. You can see a working example here.

See working example

See working example

The steps to accomplish this are:

  • Create a new section as an image block and add a default image. (note, this image is just a placeholder for styling, text and buttons).

  • Add a Gallery section and populate with the images you want in the slideshow.

  • The image text and buttons, if you configured them, will appear on every slide.

  • If you turn captions on for the gallery, then descriptions will appear in a bar below the image. If descriptions have a link, then that will also be enabled.

  • Add jQuery (if not already included)

  • Add gallery.js and gallery.css code links.

  • Add call to function doGalleryShow.

Add jQuery code somewhere, if you do not already have it included. 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Add the following to the advanced code injection section of the page. 

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@a5a46e8/gallery.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@dad4486/gallery.css" />
<script>
$( document ).ready(function() {
    doGalleryShow();
})
</script>

Review source code:

gallery.js – https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@dad4486/gallery.js

gallery.css – https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@a5a46e8/gallery.css