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
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
  • 0
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

Screenshot 2021-10-27 at 23.55.54.png

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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...