Super Easy Image Slider in Squarespace - Version 3.0
In this article, I’m going to show you how to easily add a full-width image slider to your Squarespace website.
This tutorial is for total beginners, if you’re able to copy & paste, then you can do this!
This is an update to my previous image slider plugin (if you’re looking for that one, click here). I’ve rebuilt this from the ground up to be more integrated with Squarespace’s platform, simpler to install, touch to swipe, and many more features.
See it in action here: Demo
This plugin works in all Squarespace 7.1 websites and in Squarespace 7.0 Brine Templates.
I also have a Pro version of this plugin with tons of additional features. If you want to purchase that, just click here to jump straight to the purchase page.
Free Version
- Turn Sections Into Slides
- Mobile Friendly
- Background Images / Videos
- No-Code Editing
- Navigation Arrows
- Custom Colors
- Full-Width Page Slider
- 1 Slider / Page
Pro Version
- Everything in Free Plus...
- Auto-Transition Slides
- Unlimited Sliders / Page
- Slider Dots (Pagination)
- Slide Effect - Fade Between
- Slide Effect - CoverFlow
- Stop At Last Slide
- Additional CSS Customizations
- Self Hosting Installation Option
Now let’s move on to the installation of our Free slider.
Installation Video
Overview
First, I built this plugin to be seamlessly integrated with the Squarespace editor. This means it’s super easy for you to add your own content and edit without having to know any coding skills.
This slider also gives you lots of flexibility in how each slide looks. Add in a background image, a background video, text blocks, image blocks, forms, buttons, anything! Each slide has all the design and functionality capabilities of a normal Squarespace section.
Once you apply the code, each of the sections that you designate in the code below will turn into slides in your slider, and you’re done! Easy peasy.
The best part, you don’t need to jump into the code to see the data-attribute-id or the CSS selector or anything. All you need to do is drop a code block into the section that you want to be the first slide and voila!
Super simple, super easy.
(For any developers who are curious, this slider is built on top of the incredible Swiper API.)
Installation in Squarespace 7.1
1. Add in the installation code
Navigate to your Site Settings » Advanced » Code Injection area. This is the code that will turn your sections into sliders.
Add this into your Site Footer Code Injection Area:
*If you’re on a Personal Plan in Squarespace, paste this into a Markdown Block in the Footer of your site.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sliderFree@3.0/javascript.min.js"></script>
2. Create a new page
Create a new page the same way that you normally would, or if you’ve already got a page built out that you want to add this slider to, you can just go straight to that.
To create a new page, navigate to your PAGES tab and hit the + icon next to the NOT LINKED section. If you’d like to follow along with the same page layout I’m using for this installation guide, click on “Page Layouts” and “General 1”. However, when you’re ready to build your real page that you want to use this slider in, you can use any page layout or a blank page.
Note: This plugin only works on “Pages” and “Portfolio Items”. Basically anything that allows you to add SECTIONS. If you’re looking for a way to jazz up your blog page banners, check out this plugin.
3. Build Your Slider
Now, within the first section (which will be where your slider shows) on the new page, add in a CODE BLOCK (or Markdown Block for Personal Plans) and paste in the following code:
<div data-wm-plugin="section-slider"></div>
Hit save on the CODE BLOCK and then save on the page. You should now see a slider that uses the next four SECTIONS on that page as its slides.
(If you’d rather your slider be further down on the page, not the first section, you can do that too.)
You now have a slider with the default settings:
4 slides
Loop through (after the last slide you can keep going back to the first)
Auto-Height (height of the slider will automatically adjust based on the slide height)
Arrows
Now you’re ready to go back into EDIT mode and change the content on each section however you’d like.
You’re basically done installing the slider at this point, and the rest of it is just editing the content exactly the same way you normally would for each section.
Let’s talk a little more about adjusting your slider’s setting…
Installation in Squarespace 7.0
Please note the following items before installing on your Squarespace 7.0 Brine Site
You must be using a Brine template
Parallax must be turned off. Parallax images are stored differently in the website, so in order for background images to work properly, you can’t have parallax turned on
1. Add in the installation code
Navigate to your Site Settings » Advanced » Code Injection area. This is the code that will turn your sections into sliders.
Add this into your Site Footer Code Injection Area:
If you’re on a Personal Plan in Squarespace, paste this into a Markdown Block in the Footer of your site.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sliderFree@3.0/javascript.min.js"></script>
2. Create a new Index page
Create a new page the same way that you normally would, or if you’ve already got a page built out that you want to add this slider to, you can just go straight to that.
To create a new page, navigate to your PAGES tab and hit the + icon next to the NOT LINKED section. Create a new INDEX PAGE and add at least 4 PAGES within that INDEX PAGE. Add some content into each section, feel free to add background images as well to the pages.
Note: This plugin only works with INDEX PAGES. If you’re looking for a way to jazz up your blog page banners, check out this plugin.
3. Build Your Slider
Now, within the first PAGE on the INDEX PAGE, add in a CODE BLOCK (or Markdown Block for Personal Plans) and paste in the following code:
<div data-wm-plugin="section-slider"></div>
Hit save on the CODE BLOCK and then save on the page. You should now see a slider that contains each of the next four PAGES on that Index as its slides.
Note that your slider will not be viewable in edit mode, although it is live on your site. This is done so that you can easily edit the slider without having to remove the code, potentially breaking it on your live site. However, if you’d like to change this so that you can see the slider in editor mode, see step 4 below.
4. View Slider in Edit Mode (Optional)
If you’d like to be able to see the slider in the backend editor mode, add this code to the advanced header code injection area of your INDEX PAGE.
If you’re on a Personal Plan in Squarespace, paste this into a Markdown Block in the Footer of your site.
<div data-view-slider="true"></div>
You now have a slider with the default settings:
4 slides
Loop through (after the last slide you can keep going back to the first)
Auto-Height (height of the slider will automatically adjust based on the slide height)
Arrows
Now you’re ready to go back into EDIT mode and change the content on each slide however you’d like.
You’re basically done installing the slider at this point, and the rest of it is just editing the content exactly the same way you normally would for each page.
Let’s talk a little more about adjusting your slider’s setting…
Adjust the Slider Settings
Now let’s play around with some of the settings we want to adjust, like number of slides, scroll speed, etc. Remember the code we put int the code block of the first slide’s section earlier? Well, we can add attributes to that element to adjust some of the settings. For example, if we only wanted a slider with 3 slides, our code would look like this.
<div data-wm-plugin="section-slider" data-slides-count="3"></div>
In this example, data-slides-count is the attribute we’re changing, and 3 is it’s new value. So now our slider will only contain 3 slides. Here is a list of all the default items you can adjust with the Free Slider:
*If you want your slider to move through each slide automatically, check out my $10 Pro version, which includes auto-scroll.
<div data-wm-plugin="section-slider" data-slides-count="3" data-arrows="bottom" data-speed="1000" data-color="#ff0000"> </div>
data-slide-count
data-arrows
data-speed
data-color
data-slide-count: adjust the number of slides in the slider
data-arrows: add, remove, or change the location of the slider navigation arrows
data-speed: change the transition-time between each slide (in milliseconds)
data-color: changes the color of your slider navigation arrows and dots (HEX or any color value)
I’ve had a lot of people ask me how to do this, if you’d like to turn each slide in your slider into a link, check out this article I wrote: Turn an Entire Section into a Link.
Slider Pro Plugin
See Demos (more demos on menu dropdown)
Add and customize a full page slider to your Squarespace Website. This plugin transforms page sections, including it’s blocks and backgrounds, into a slider with the ability to set to auto-slide.
