Banner Image Slider
1. How it Works
Add the Slider Section: Insert a new section on your Squarespace page and select the ‘Banner Slider’ design from the 'People' category.
Customize Your Content: Add your chosen images, along with engaging text and buttons, directly through the content editor.
Adjust the Design: Use the design settings to modify the size and spacing of your slider to achieve the desired look.
Inject the Code: Copy the custom code provided and paste it into your page’s
<head>tag for added functionality.Save and Publish: Once you’re satisfied with the design, save your changes and your slider will be live on your site.
FAQ
-
You might be wondering: Can you make your banner slider automatically advance, just like the gallery slideshow does on Squarespace? While this handy feature isn’t part of Squarespace’s standard toolkit, there are a couple of workarounds worth exploring.
Custom Code Solution: With a bit of custom JavaScript, you can add auto-scroll capability to your banner slider. This script can be easily dropped into your page’s header or code injection area—no advanced coding experience required.
Third-Party Plugins: Prefer a plug-and-play option? Tools from developers like Squarespell offer plugins specifically designed to add auto-sliding action (and much more) to your banners. Most include configuration settings for timing, transitions, and text behavior.
Whatever route you choose, it’s absolutely possible to achieve that smooth automatic scroll you’re after—whether by copy-pasting a code snippet or giving a plugin a whirl.
-
Set Up Autoplay and Adjust Slide Timing
To enable autoplay for your Squarespace banner slideshow, head into the slider’s settings panel. Look for the Autoplay toggle and switch it on this will let your images cycle automatically, keeping your page dynamic without any manual clicks.
If you prefer a cleaner look, you can also hide the slideshow controls by setting the Controls Location to "Hidden." This keeps things streamlined and ensures visitors enjoy a seamless viewing experience without the distraction of navigation arrows.
Want to control how long each image stays visible? Simply adjust the Slide Duration using the built-in slider. You can fine-tune the timing so each slide lingers just long enough to make an impression before transitioning to the next.
-
For the best results, use crisp, high-resolution images sized around 2500 pixels wide for your banner slider. Preparing your graphics in a tool like Canva makes it easy to resize them to perfection. When saving your images, choose JPEG format these files load faster than PNGs, keeping your slider snappy and your site visitors happy.
-
Customize Your Content: Add your chosen images, along with engaging text and buttons, directly through the content editor.
For each slide, upload your selected images and layer on headlines, descriptions, and compelling call-to-action buttons.
If you want to feature multiple slides, simply click Add to expand your banner with more images and text combinations.
Adjust the Design: Use the design settings to modify the size and spacing of your slider to achieve the desired look.
Fine-tune the look by heading to the Design panel:
Change the alignment of your text and buttons—move them left, right, or center to keep important parts of your images visible.
Adjust colors for both text and buttons under the color settings, ensuring everything stands out just the way you like.
Experiment with slide padding and vertical alignment to give your banner the perfect balance of space and focus.
Mix, match, and preview until your slideshow banner feels just right showcasing your content without anything getting lost in the shuffle.
-
1. How it Works
Add the Slider Section: Insert a new section on your Squarespace page and select the ‘Banner Slider’ design from the 'People' category.
Customize Your Content: Add your chosen images, along with engaging text and buttons, directly through the content editor.
Adjust the Design: Use the design settings to modify the size and spacing of your slider to achieve the desired look.
Inject the Code: Copy the custom code provided and paste it into your page’s `` tag for added functionality.
Save and Publish: Once you’re satisfied with the design, save your changes and your slider will be live on your site.
Step-by-Step Details for Banner Slideshow Setup
Navigate to the Page Editor
Open the page where you want your slideshow banner, and click Edit.Add a Section Under the Header
Right below the header, click Add Section.
Under Add a Section, select Images.Select a Gallery Layout
Pick one of the options marked with the “i” icon—these layouts let you easily add and rearrange content items without manual shuffling.Upload Your Images
Hover over the new gallery section and click Edit Gallery.
Add all desired images, then click Close when finished.Configure the Gallery for a Banner Slider
Hover over the section again and click Edit Section.Set Gallery Type to Slideshow: Full
For maximum impact, set Width to Full Bleed
Adjust the height to control how much of the screen your banner covers
Under Controls Location, choose Arrows or Bullets
Pick your favorite Animation for smooth image transitions
Enable Autoplay (Optional)
Under Options, turn on Autoplay
To create a seamless experience, set Controls Location to Hidden if you don’t want visitors manually switching images
Use the Slide Duration drag tool to set how long each image stays on screen
Finalize Your Banner Slider
After editing, always click Save to ensure your changes stick.
With these steps, you can create an engaging, full-width banner slider that’s easy to customize and sure to grab your visitors’ attention.
-
1. How it Works
Add the Slider Section: Insert a new section on your Squarespace page and select the ‘Banner Slider’ design from the 'People' category.
Customize Your Content: Add your chosen images, along with engaging text and buttons, directly through the content editor.
Adjust the Design: Use the design settings to modify the size and spacing of your slider to achieve the desired look.
Inject the Code: Copy the custom code provided and paste it into your page’s `` tag for added functionality.
Save and Publish: Once you’re satisfied with the design, save your changes and your slider will be live on your site.
Detailed Setup Steps and Customization Options
Edit Your Page: On the page where you want your slideshow banner, click Edit.
Add a Section: Just below your header, click Add Section.
Select an Image Section: Under Add a Section, pick Images. For more flexibility, choose an option marked with the “i” icon—these let you quickly swap layouts without manual shuffling.
Add Images: Hover over your new section and select Edit Gallery to upload your images. When finished, click Close.
Configure Your Gallery: Hover again and click Edit Section.
Set Gallery Type to Slideshow: Full for a classic banner feel.
For a bolder look, set Width to Full Bleed.
Adjust the Height to control how much of the screen your banner occupies.
Under Controls Location, choose between Arrows or Bullets for navigation.
Pick an Animation style for how each image transitions in.
Want your banner slideshow to autoplay?
Under Options, enable Autoplay.
Hide manual controls by setting Controls Location to Hidden, if you’d rather visitors not manually advance the slides.
Use the Slide Duration drag tool to set how many seconds each image stays visible.
When all your tweaks are complete, don’t forget to click Save so your changes go live.
2. Add this code to Page Header (Advance)
<script>
(function(){
let playInBackend = true,
timing = 5,
section = '',
direction = 1; //1 = forwards, 0 = backwards
/*Do not Adjust below this line*/
function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}window.addEventListener("load",function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach(e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)})});
}());
</script>
To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!
