Super Easy Image Slider in Squarespace [updated]
Article
» This plugin works in Squarespace 7.1 and in Squarespace 7.0 (Brine Template using Index pages)
» Paid Version available for auto-transitions + design enhancements
This is an update to my previous image slider plugin. I’ve rebuilt this from the ground up to be more integrated with Squarespace’s platform, simpler to install, and with a paid version that has auto-transitions for the slides.
Demo in Squarespace 7.0 (pw:123)
Demo with auto-transitions (paid)
Features
✓ No HTML or CSS needed (Only 8 lines of code)
✓ Edit Squarespace normally, no code blocks
✓ Sliding Transitions
✓ Simple editing using blocks
✓ Mobile Friendly
Ok, let’s get started. First, I built this plugin to be seamlessly integrated with the Squarespace editor. With my other slider, you had to be pretty comfortable with HTML and CSS to customize it. Any additional elements your wants to add to each slide - an image, button, text - had to be added with HTML & CSS. This new slider fixes that.
The way this works is that you build out each slide as a section. Add in a background image, add in a video, text blocks, image blocks, forms, buttons, anything! each slide is just a normal Squarespace section.
Once you apply the code, each of the sections that you want to be slides turn into slides! Easiest 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 designate which section number should be the first slide, and which section number should be the last slide. Super simple, super easy. Now, check out my tutorial video on the next tab to see how it works in Squarespace 7.0 & Squarespace 7.1
Icons come from Orion Icon Library.
Squarespace 7.0
This code is primarily built for websites built in 7.1. However, this still does work with websites in 7.0. There are some caveats though.
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
AJAX Loading must be turned off. You can do this in Site Styles » Design » Ajax Loading
Page content is pulled 100% wide. You can adjust this with CSS if you are comfortable getting in there, but otherwise, the default pulls the content out wide.
This plugin has been updated! If for some reason you’re looking for the older version, you can visit the page here.
Steps
Create each slide as a new section
Each slide will be full height (unless you change it in css) so make sure your sections are full height.
Paste in Javascript code *
Add in your startingSection number. (ex. if you’d like the second section to be your first slide, add in the number 2)
Add in your endingSection number (ex. if you’d like the fourth section to be your last slide, add in number 4) (minimum of 3 slides)
CSS is optional.
To make edits to your slide, change editingMode variable to true.
*Note I updated the code on 4.20.20. Please be aware of the changes from this video.
Code
Note: I updated the code on 4.20.20 to take care of some bug fixes & improve some features:
The installation works the same way. Just paste Javascript in page header code injection
The sliderOn variable has been replaced with an editingMode variable. The slider is now ALWAYS on in your live site, but can be turned off in your Squarespace editor. Toggle editingMode to ‘true’ to edit your slider.
Fixed issue with slides being different heights
Simplified changing the slider height in CSS
As this is a new release, please let me know if you experience any issues with this code.
Best,
Will
Javascript
Add to the Page Header Code Injection
<script src="https://code.jquery.com/jquery-3.4.1.js"> </script>
<script>
let wmSlider = {
editingMode: false,
startingSection: 1,
endingSection: 5,
};
</script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3198845/WMSliderCSSFREEv1-3.css">
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3198845/WMSliderFREEv1-3.js"> </script>
Important Notes:
You need to have a minimum of 3 slides for this plugin to work effectively.
Don’t add too much content! This is primarily build to be an image slider with minimal content. So if you add too much content, the content will overflow and be cutoff. This is a feature, not a bug.
CSS (Optional)
No CSS needed! If you’d like to customize some of the slider, here are some of the selectors you can target and change.
Change the color of the next and previous arrows
#wm-slider-container .slide-btn svg path {
fill: blue !important;
stroke: blue !important;
}
Change the height of the slider
#wm-slider-container {
height:70vh !important;
}
Change the transition duration
#wm-slider-container section {
/*change the "1" to however many seconds you'd like the transition to take*/
transition: all 1s ease-in-out !important;
}
Add a transparent dark overlay opacity to the image
(7.0 ONLY, background image opacity in 7.1 can be adjusted in the section settings below the image)
#wm-slider-container .Index-page-image:before{
/*change the .5 to a number between 0 and 1*/
background:rgba(0, 0, 0, 0.5);
}
Change the transition color to red
#wm-slider-container {
background-color:red;
}
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.
