Before-After Slider Code HTML/CSS/JS

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

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

some options in tool

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.

On 10/27/2021 at 10:56 PM, 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

Hi dear @BeeDesign
Use this code please.
 

<div id="ninja-elements" class="ix-block-ninja-custom-after-before" style="height: 400px;"><div id="comparison"><figure style="background-image: url(&quot;https://images.squarespace-cdn.com/content/v1/60d21d2586979023a0502049/8da456a2-711a-4717-829b-0cd4e82083be/image-asset.jpg&quot;); --ixaftercolor:#2788d8;" data-content="After"><div id="handle" style="left: 50%;"></div><div id="divisor" style="background-image: url(&quot;https://images.squarespace-cdn.com/content/v1/60d21d2586979023a0502049/2027b1f8-0754-41f2-9486-37d26f98ecfd/image-asset.jpg&quot;); --ixbeforecolor:#d60b4bcc; width: 50%;" data-content="Before"></div></figure><input type="range" min="0" max="100" value="50" id="slider"></div></div>

Thanks!
Best,
Leopold

@IXStudio hello! 

I have recently come across your solution also, while in search for the slider, but form the installation guide it seems you have to have access to code injection area, which on 7.1 is only available on business or commerce plans? Am I correct in understanding that there is no way to use it on a personal plan? OR does it work with code block also? 

Thank you! 

On 5/31/2023 at 10:46 PM, SashaMk said:

@IXStudio hello! 

I have recently come across your solution also, while in search for the slider, but form the installation guide it seems you have to have access to code injection area, which on 7.1 is only available on business or commerce plans? Am I correct in understanding that there is no way to use it on a personal plan? OR does it work with code block also? 

Thank you! 

 

With Personal/Basic Plan, you can find a free code on Codepen (code with html/css, not javascript box), then share its url, we can convert it to Squarespace Code Block