Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 3

Before-After Slider Code HTML/CSS/JS


SteveTaber

Question

Recommended Posts

  • 0

Thanks to jrlaughlin3 for the help. His instructions are on point! I know many including myself have struggled to get this plugin working and I for one am grateful that Jason took the time to not only figure it out, but to also note each and every step. Huge thanks!

Link to comment
  • 0

Jake - you’ve got a bit of repetition in there.

  • Step 6 is unnecessary, if you look at the screen at step 7, you will see: “Enter code that will be injected into the ‘head’ tag on every page of your site
  • Further on, on adding a Code Block you include the jQuery, jQuery eventmove and TwentyTwenty files again!

So on every page with the slider you’re including it all twice, and on one page you have it included 3 times.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 0

Hi guys,
We made a custom Chrome extension that let you make Before After Image Slider without worrying about coding. No need to write a line of code! It works on 7.0 and 7.1.

Demo: https://www.sqsp.ixstudio.net/image-comparison
Free Download: https://chrome.google.com/webstore/detail/squarespace-ninja-kit-ext/klkcninekpnpemndealaeebjajmkabcf

Please check it and let me know your feedback. I'd love to add new and free elements on it!
Thanks.
Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 0
1 hour ago, aok93 said:

@rwp Could you please clarify whether the free script you've linked is compatible with Squarespace 7.1? It appears that several of the steps listed require the Developer Platform, which is no longer available in 7.1 to my knowledge.

Works in 7.1 for sure.

Link to comment
  • 0
On 8/24/2020 at 10:32 PM, IXStudio said:

Hi guys,
We made a custom Chrome extension that let you make Before After Image Slider without worrying about coding. No need to write a line of code! It works on 7.0 and 7.1.

Demo: https://www.sqsp.ixstudio.net/image-comparison
Free Download: https://chrome.google.com/webstore/detail/squarespace-ninja-kit-ext/klkcninekpnpemndealaeebjajmkabcf

Please check it and let me know your feedback. I'd love to add new and free elements on it!
Thanks.
Best,
Leopold

Hi,

I've installed the extension and made a image slider on my site (trial version) But the image doesn't show. In site edit mode the Image Comparison block is visible and I can open it to edit, it shows the before and after image etc., but it's not visible on the page. What is wrong, what do I need to do?

Thanks for your reply.

Ca_Milo

Link to comment
  • 0
On 8/24/2020 at 1:56 PM, rwp said:

Works in 7.1 for sure.

Hi @rwp Would you be willing to outline how you got it to work?

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 0
On 9/22/2020 at 7:25 PM, IXStudio said:

Hi @Ca_Milo
Did you follow this installation guide?
https://www.ixstudio.net/ninjakit/installation-guide

Also, please share your website URL.

Please use the like button if it helps you!

Best,
Leopold

Hi @IXStudio I have download and stilled following your instructions but can not get the Image comparison to work im just getting the below option. In fact I get the same for all the option other than gallery.

Can you help please

Screenshot 2021-10-27 at 23.55.54.png

Edited by BeeDesign
Link to comment
  • 0
On 10/28/2021 at 5:56 AM, BeeDesign said:

Hi @IXStudio I have download and stilled following your instructions but can not get the Image comparison to work im just getting the below option. In fact I get the same for all the option other than gallery.

Can you help please

Screenshot 2021-10-27 at 23.55.54.png

You can also use this free tool to add before after slider

The most assertive way to showcase your offers

some options in tool

Versatile layout options for perfect positioning

Let me know if you have any problems

Quote

The link contains the affiliate code. If you use the free version, don't worry about this. But if you upgrade to the paid version for more features, I will get a small commission when you click above link.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...